vue指令之 v-fo循环和 v-show 以及key值的用法

一、v-for指令

下文用四个案例来分别解析，包括循环普通数组，循环对象数组、循环对象以及数字迭代。

<body>
    <div id="add">
        <!-- v-for 循环普通数组  (num,int) 其中的第一个值表示内容，第二个值为索引。如果只填写内容，则修改v-for循环的内容为 num in list-->
        <p v-for="(num,int) in list">内容为：{{ num }}----索引为:{{int}}</p>
        <!-- v-for 循环对象数组 如果添加索引，则通过（index，i） in list1，其中i，第二个值表示的索引，在其中调用。-->
        <p v-for="index in list1">获取id：{{index.id}}------获取内容: {{index.name}} </p>
        <!-- v-for 循环对象 在遍历对象身上的键值对的时候， 除了 有  val  key  ,在第三个位置还有 一个 索引 ，这个值可以添加，也可以不添加-->
        <p v-for="(val,key,i) in user">键名：{{key}}-------内容：{{val}}</p>
        <!-- in 后面可以放 普通数组，对象数组，对象， 还可以放数字 -->
        <!-- v-for 迭代数字 注意：如果使用 v-for 迭代数字的话，前面的 num 值从 1 开始-->
        <p v-for="num in 10">这是第{{num}}次想你</p>
    </div>
</body>
</html>
<script src="vue-2.4.0.js"></script>
<script>
    var vm = new Vue({
        el: '#add',
        data:{
            list: [1,2,3,4,5,6],
            list1:[
                    { id: 1, name: 'zs1' },
                    { id: 2, name: 'zs2' },
                    { id: 3, name: 'zs3' },
                    { id: 4, name: 'zs4' }
            ],
            user: {
                    id: 1,
                    name: '托尼·屎大颗',
                    gender: '男'
                    }
        },
        methods:{}
    });
</script>

二、对key值的用法

key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值，key值的类型只有两种，数字类型或者字符串类型。

<body>
  <div id="app">

    <div>
      <label>Id:
        <input type="text" v-model="id">
      </label>

      <label>Name:
        <input type="text" v-model="name">
      </label>

      <input type="button" value="添加" @click="add">
    </div>

    <!-- 注意： v-for 循环的时候，key 属性只能使用 number获取string -->
    <!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 -->
    <!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 -->
    <p v-for="item in list" :key="item.id">
      <input type="checkbox">{{item.id}} --- {{item.name}}
    </p>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        list: [
          { id: 1, name: '李斯' },
          { id: 2, name: '嬴政' },
          { id: 3, name: '赵高' },
          { id: 4, name: '韩非' },
          { id: 5, name: '荀子' }
        ]
      },
      methods: {
        add() { // 添加方法
        //.unshift()  向数组的开头添加一个或更多元素,并返回新的长度。
        //.push() 向数组的结尾添加一个或更多元素,并返回新的长度。
          this.list.unshift({ id: this.id, name: this.name })
        }
      }
    });
  </script>
</body>

三、v-if和v-show的用法和区别

v-if 的特点：每次都会重新删除或创建元素 -->

v-show 的特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式

优缺点：

v-if 有较高的切换性能消耗

v-show 有较高的初始渲染消耗

使用条件：

如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show

如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if

<body>
    <div id="mas">
       <!-- <input type="button" value="toggle" @click="toggle"> -->
        <input type="button" value="toggle" @click="flag=!flag">

        <h3 v-if="flag">这是用v-if控制的元素</h3>
        <h3 v-show="flag">这是用v-show控制的元素</h3>
    </div>
</body>
</html>
<script src="vue-2.4.0.js"></script>
<script>
    var mas = new Vue({
     el : "#mas", 
     data:{
        flag:true
     },
     methods:{
        // toggle(){
        //     this.flag = !this.flag
        // }
     }

 })
</script>