vue基本指令（二）

vue基本指令（二）

1. v-if与v-show:vue中的切换指令。

• v-if特点：每次都会删除或者重新创建元素。并且有较高的切换性能消耗，如果元素涉及频繁的切换，推荐使用v-show。
• v-show特点：每次不会重新进行删除与创建操作，只是切换了元素的 display:none 的样式。并且用较高的初始渲染消耗，如果元素永远也不会被显示出来，被用户看到，推荐使用v-if。

  <!--切换效果代码如下：-->
  <div id="app">
     <input type="button" value="toggle" @click="flag=!flag">    </input>
      <p v-if="flag"></p>
      <p v-show="flag"></p>
  </div>

  //vue中的数据
  var vm=new Vue({
      el:"#app",
      data:{
         flag:ture,
         },
     })

2. v-for:用于循环遍历数组或者对象.(通常用于以下4种情况）

• 遍历普通数组

  <!--只遍历数组的值-->
  <p v-for="item in list1">{{item}}</p>
  <!--遍历数组的值与索引-->
  <p v-for="(item,index) in list1">值为：{{item}}---索引为：{{index}}</p>

• 遍历对象数组

  <!--只遍历数组中对象的的每一项-->
  <p v-for="item in list2">{{item}}</p>
  <!--遍历数组中对象的每一项的属性值-->
  <p v-for="item in list2">{{item.name}}---{{item.age}}</p>
  <!--遍历数组对象的每一项的属性值与索引-->
  <p v-for="(item,index) in list2">索引为：{{index}}----属性值为：{{item.name}}---{{item.age}}</p>

• 遍历对象

    <!--遍历对象的属性名，属性值，索引-->
    <p v-for="(val,key,index) in list3">值为：{{val}}---键为：{{key}}---索引为：{{index}} </p>

//以上遍历的vue数据
var vm=new Vue({
     el:"#app",
     data:{
     list1:[1,2,3,4,5,6,7,8],
     list2:[
             {id=1, name:"哒哒", age="10岁"},
             {id=1, name:"依依", age="12岁"},
             {id=1, name:"希希", age="11岁"},
            ],
    list3:{
             {id=1, name:"哒哒", age="10岁"},
             {id=1, name:"依依", age="12岁"},
             {id=1, name:"希希", age="11岁"},
          },
        },
         })

• 迭代数字

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

• key属性

当vue.js用v-for正在更新已经渲染过的元素列表时，它就默认用“就地复用”策略。如果数据项的顺序被改变，vue将不是移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已经被渲染过的每个元素。
为了给vue一个提示，以便它能跟踪每个节点的身份，从而重用或者重新排序现有元素，所以需要为每一项提供一个唯一的key值。
注意：1. key值只能使用number或者string。
2. key 在使用时，必须使用v-bind 属性绑定的形式，指定key的值，所以最好使用v-for时就加上key属性。

    <!--运用上面对象数组中代码举例-->
     <p v-for="item in list2" :key="item.id">{{item}}</p>

3. v-model:用于表单元素的双向数据绑定。

    <!--注意:v-model只能用于表单元素，即input(radio,text,address,email...) select  checkbox   textarea-->
    <input type="text"  v-model="msg"></input>