vue.js 常用指令用法

v-if

v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中，代码如下：

    <div id="app">
        <p v-if="greeting">{{ msg }}</p>
    </div>
    <script>
        var vm = new Vue({
            el : "#app",
            data : {
                msg : "天气不错",
                greeting : false
            }
        })
    </script>

如果 greeting : true

v-show

v-show指令是根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时，元素被隐藏。查看DOM时，会发现元素上多了一个内联样式style=“display:none”。

   <div id="app">
        <p v-if="greeting">{{ msg }}</p>
        <p v-show="greeshow"> {{ msg2 }} </p>
   </div>
       <script>
          var vm = new Vue({
            el : "#app",
            data : {
                msg : "天气不错",
                greeting : true,
                msg2 : "我是 v-show ",
                greeshow : true
            }
        })
    </script>

如果 greeshow : true 元素则会 显示；如果为false ,就会隐藏。
v-show和v-if的区别
1.v-show是控制样式display:none,v-if是直接控制元素的是否存在
2.v-if如果初始条件为flase则连编译都没有
3.v-show不支持template标签

v-else

v-else就是JavaScript中的else的意思，它必须跟着v-if或者v-show使用。如下代码：

<div id="app">
        <p v-if="greeting">{{ msg }}</p>
        <p v-else> {{ msg2 }} </p>
    </div>
    
    <script>
        var vm = new Vue({
            el : "#app",
            data : {
                msg : "天气不错",
                greeting : false,
                msg2 : "我是 else ",
            }
        })
    </script>

如果为else ,就会走下面的语句。

v-for

使用$index来获得相应的数组索引。

<div id="app">
        <ul>
            <li v-for="(item,index) in arr" :key="item">元素：{{ item }} -->下标： {{ index }} </li>
        </ul>
    </div>
    
    <script>
        var vm = new Vue({
            el : "#app",
            data : {
               arr : [1,2,3,4,5,6],
            }
        })
    </script>

可以循环出数组内容，添加元素。