vue指令

指令

用法

v-if

v-else-if

v-else

              <div id="app">

                     <p v-if="show">显示这段文本</p>

<!--判断多个元素时可以使用vue的内置元素<template>，最终渲染时不会包含该元素-->

                     <template v-if="state==1">

                            <p>文本</p>

                            <p>文本</p>

                     </template>

                     <p v-if="state==1">当state为1时显示该行</p>

                     <p v-else-if="state==2">当state为2时显示该行</p>

                     <p v-else>否则显示该行</p>

                     <template v-if="type==‘a‘">

                            <label name="a"></label>

<!--切换时出现复用标签问题加key属性:input标签中的值不会被清空加上key，key的值是唯一的-->

                            a:<input key="a-input"> 

                     </template>

                     <template v-if="type==‘b‘">

                            <label name="b"></label>

                            b:<input key="b-input"> 

                     </template>

                     <button @click="typeclick">切换</button>

              </div>

              <script>

                     var app = new Vue({

                            el: ‘#app‘,

                            data: {

                                   show: true,  //为false不显示

                                   state: 1,

                                   type:‘a‘

                            },

                            methods:{

                                   typeclick:function(){

                                          this.type=this.type==‘a‘?‘b‘:‘a‘;

                                   }

                            }

                     })

       </script>

v-show

 与v-if用法相同，区别是这个是控制显示隐藏的，无法使用<template>