一招搞定Vue常用指令

/* 在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>

<p v-bind:属性名="变量"></p>

//可以简写成

<p :属性名="变量"></p>

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

<p :属性名=" '常量' "></p>

<p v-on:click=" num = 1 "></p>

//可以简写成

<p @click=" num = 1 "></p>