少量Vue指令日常

1.v-for 

（1）定义：用 v-for 指令基于一个数组来渲染一个列表，与for循环相似

（2）语法：

例：i代表数组项，k代表数组下标

  <div id="app">
        <p v-for="(i,k) in goods">
            {{k}}:{{i}}</p>

    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                goods: { title: '宝马', price: 420000 }
            }
        })
    </script>

2.v-if与v-show与v-model，因为if与show的条件是需要双向绑定也就是v-model

例：

 <div id="app">
        <input type="text" v-model="n" placeholder="请输入数字">
        首先给input框v-model，进行双向绑定
        <h1 v-if="n==1">666</h1>
判断v-model的n值是否等于1，如果等于1则页面也是666
        <h1 v-show="n==1">666</h1>
判断v-model的n值是否等于1，如果等于1则页面也是666
        <h1 v-show="n==2">777</h1>
判断v-model的n值是否等于2，如果等于1则页面也是777
        <h2 v-if="bool">888</h2>
判断v-if的布尔值bool是否为true，则页面显示888
（下方scr内已定义bool值为true）
    </div>

  <script>
        new Vue({
            el: '#app',
            data: {
                bool: true,
                n: ''
            }
        })
    </script>

3.v-if与v-show的相同与不同，都是控制元素的显示隐藏，控制方式不一样，v-if 控制元素的显示隐藏是通过移除/添加元素而v-show控制元素显示隐藏是通过添加css属性，比如display none/block，v-if 相比之下消耗性能会让浏览器重排重绘，所以如果频繁切换的话，建议使用v-show