指令

• v-text: innerText
• v-html: innerHTML
• v-if: 是否插入元素 在控制台看不到元素 适用于不频繁切换和权限控制的时候
• v-show: 是否显示元素 在控制台可以看到元素 频繁切换的时候使用
• v-biand: 绑定属性 可以缩写成 ":" 用来绑定class
• v-on: 绑定事件 鼠标事件 可以缩写成 "@"
• v-model: 数据的双向绑定 常用在input框中
• v-for: 遍历数据 遍历后台返回的数据

html部分

<!--v-text和v-html-->
<span v-text="mytext"></span>
<span v-html="myhtml"></span>

<!--v-if 必须相邻dom-->
<button v-if="num === 1">测试v-if</button>
<button v-else-if="num === 2">测试v-else-if</button>
<button v-else="num">测试v-else</button>

<!--v-show-->
<button v-show="isShow">测试isShow</button>

<!--v-bind和v-on-->
<input type="text" v-bind:value="myValue" :file="'xxx'" />
<button v-on:click=" myValue='abc' ">点我改变myValue</button>
<button @click=" myValue='def' ">简写改变myValue</button>

<!--v-model-->
<input type="text" v-model="myValue" />
<button v-show="myValue === 'xxx'">myValue===xxx显示</button>

<!--v-for 遍历 数组和对象-->
<ul>
  <li v-for="item in stus" :class="item.myClass">
    {{item.name}}
  </li>
</ul>

<ul>
  <li v-for="(val, key, index) in stus2">
    val: {{val}}
    key: {{key}}
    index: {{index}}
  </li>
</ul>

js部分

data () {
  return {
    mytext: '<h1>我是v-text的值</h1>',
    myhtml: '<h1>我是v-html的值</h1>',
    isExit: true,
    num: 1,
    isShow: false,
    myValue: '哈哈哈哈哈',
    stus: [{name: '张三', myClass: 'a'},{name: '李四', myClass: 'b'},{name: '王五', myClass: 'a'}],
    stus2: {
      'a': '张三',
      'b': '李四',
      'c': '王五'
    }
  }
}