一招搞定Vue常用指令

插入文本：

v-text

相当于元素的innerText属性，必须是双标签

插入HTML：

相当于元素的innerHTML属性

循环遍历

v-for的使用，除了item属性，还有一些其他辅助属性

 /* 在html中使用v-for指令进行渲染 */
/*
 普通数组
 */
  data:{
      list:[1,2,3,4,5,6]
   }
  
--索引值--{{i}}   --每一项--{{item}}

/*
 对象数组
 */
 data:{
      list:[1,2,3,4,5,6],
      listObj:[
        {id:1, name:&＃39;zs1&＃39;},
        {id:2, name:&＃39;zs2&＃39;},
        {id:3, name:&＃39;zs3&＃39;},
        {id:4, name:&＃39;zs4&＃39;},
        {id:5, name:&＃39;zs5&＃39;},
        {id:6, name:&＃39;zs6&＃39;},
      ]
}
   
--id--{{user.id}}   --姓名--{{user.name}}

/*
  对象
  */
  data:{
      user:{
        id:1,
        name:&＃39;托尼.贾&＃39;,
        gender:&＃39;男&＃39;
      }
 }
 
--键是--{{key}}--值是--{{val}}

/*
 数字
 
 */
这是第{{count}}次循环

条件渲染

v-if：是否插入元素

v-show是否隐藏元素，根据CSS进行元素的渲染

属性绑定

v-bind：属性名=“常量 || 变量名”

简写形式：属性名=“常量 || 变量名”

//可以简写成


//如果要赋值常量，需要给常量用单引号包起来，如

双向绑定:v-model

所谓的双向绑定，就是你在视图层里面改变了值，vue里面对应的值也会改变。只能给具备value属性的元素进行双向数据绑定。

绑定事件:v-on

v-on:click = “方法名 || 直接改变 vue 内部变量”，

简写形式：@click = “方法名 || 直接改变 vue 内部变量”

//可以简写成

跳过元素节点

v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

只渲染一次

v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

推荐学习：vue.js教程

以上就是一招搞定Vue常用指令的详细内容，更多请关注其它相关文章！