一招搞定Vue常用指令一招搞定Vue常用指令

建站运维教程
海内外主机评测推荐

一招搞定Vue常用指令

本篇文章给大家详细介绍一下Vue的常用指令。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

插入文本:

v-text

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

插入HTML:

相当于元素的innerHTML属性

循环遍历

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

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

/*
 对象数组
 */
 data:{
      list:[1,2,3,4,5,6],
      listObj:[
        {id:1, name:'zs1'},
        {id:2, name:'zs2'},
        {id:3, name:'zs3'},
        {id:4, name:'zs4'},
        {id:5, name:'zs5'},
        {id:6, name:'zs6'},
      ]
}
   <p v-for="(user,i) in listObj">--id--{{user.id}}   --姓名--{{user.name}}</p>

/*
  对象
  */
  data:{
      user:{
        id:1,
        name:'托尼.贾',
        gender:'男'
      }
 }
 <p v-for="(val,key) in user">--键是--{{key}}--值是--{{val}}</p>

/*
 数字
 <!-- 注意:如果使用v-for迭代数字的话,前面 count 的值从 1 开始-->
 */
<p v-for="count in 10">这是第{{count}}次循环</p>

条件渲染

v-if:是否插入元素

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

属性绑定

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

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

<p v-bind:属性名="变量"></p>
//可以简写成
<p :属性名="变量"></p>

//如果要赋值常量,需要给常量用单引号包起来,如
<p :属性名=" '常量' "></p>

双向绑定:v-model

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

绑定事件:v-on

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

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

<p v-on:click=" num = 1 "></p>
//可以简写成
<p @click=" num = 1 "></p>

跳过元素节点

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

只渲染一次

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

推荐学习:vue.js教程

以上就是一招搞定Vue常用指令的详细内容,更多请关注大眼天堂其它相关文章!

欢迎转载分享传播,让更多人学会:大眼天堂 » 一招搞定Vue常用指令

我来纠错

匿名发表
  • 验证码: