Vue3内置指令大揭秘！从v-if到v-show，一场条件渲染的革命

Vue3内置指令的改变

哈喽，你听过Vue.js没？最近它出了个新版叫Vue3。特别炫酷！最大的亮点是多了很多内置指令，整个感觉都变了！那今天咱们就来聊聊这两者之间的区别，给你举些实际的例子，好让你更好地把握这些变化。在Vue2中，常见的内嵌指令就像是我们熟悉的大哥们——v-if、v-for、v-bind、v-on等等，他们可以处理数据绑定、条件渲染和循环渲染等复杂问题。但是到了 Vue3，事情远不止如此，新增了好多有意思并且实用的指令。

从v-if到v-show：条件渲染方式的变化

Vue2里面的v-if功能就是用来让某些页面元素，比如按钮，显示或隐藏的。你看，只要轻轻点一下那个按钮，就能蹦出一个小提示窗口！要达到这个效果，就得参考下面这部分代码哈：

html
<div v-if="showDialog">This is a dialog!</div>

  

    点击显示提示框
    

      

        
这是一个提示框！
        关闭
      
    
  


export default {
  data() {
    return {
      showDialog: false
    };
  }
};

这个代码好神奇，您只需要利用那个v-if 的小助手，就可以让按钮和提示框瞬间显隐！说人话给您解释一下，比如，当 showDialog 为真时，其他东西都会消失不见；但若假的话，按钮自然就能出现，同时，提示框可得及时溜走所以，这也算是 Vue2 中操控条件显示的一个小窍门呐！

事实上，新的vue3加入了个叫做v-show的新指令，虽然听着有点像之前的v-if，但是其实它可不止是这么简单。这个新命令，不仅可以操纵DOM，还特别好用在修改css属性上！简单地说，就是用来决定那些没状态的组件要不要展示出来的小助手接下来咱们就示范一下，怎么用v-show来替代v-if写出更好看的示例代码！

<div v-show=”showDialog”>This is a dialog!</div>

看明白这段代码木有？其实咱们用v-show也能搞出和v-if差不多的效果。写作时候要找最合适的条件渲染法儿，这样咱就能写出漂亮还实用的程序嘞！

新引入的指令：v-model双向数据绑定

Vue3还给我们新增了一些指令，而且原先的那些也都有升级那个叫作v-model的东西用起来超级顺手，只要加进去，双向数据绑定就变得轻而易举！

  

    点击显示提示框
    

      

        
这是一个提示框！
        关闭
      
    
  


export default {
  data() {
    return {
      showDialog: false
    };
  }
};

以前用老版 Vue 做输入框加点数的时候，得自己亲手敲代码，还要记得加那些神奇的事件监听之类的东西。但是现在有了 Vue3，你只需要轻轻松松用上那个叫做v-model 的指令就搞定，看看这例子就会明白怎么操作了！

{{ message }}

这段小程序搞定！它把input框和data里的message属性紧紧地联系在一起，简直就像两个人紧握着手。不管你输什么，message属性都会跟着变；反之也是，调下message属性就能影响input框的表现。这个方法让咱们轻松搞定处理数据，感觉真是太直观！

v-bind多个属性值绑定

  

    
    
{{ message }}
  


export default {
  data() {
    return {
      message: ''
    };
  }
};

在Vue3里面，以前有的功能也得到了提升，像是那个新增加的指示器。你看，不论是只有 1 个还是很多个属性，只要用上v-bind，几秒钟就能搞定咯~

今天聊聊，咋给名叫v-bind的小哥哥送各种属性值？

这玩意儿不就把图片链接搞成了能点开的链接吗？改掉了以后，看起来是不容易理解多了？

总结与展望

总的来说，vue3这次在内置指令方面玩出了点新鲜玩意儿，给咱们带来了更多方便更新提速后的指令让Vue3更适应咱们前端小伙伴的日常使用习惯。简单地选个指令跟着用就行，这样一来，文章的质量和速度岂不是瞬间提升了？

  

    点击打开链接
  


export default {
  data() {
    return {
      url: 'https://www.example.com'
    };
  }
};

Vue 3比以前的2版强多了！目前前端可厉害，相信以后的Vue.js还能给我们带来更多便利。