Vue指令

1、v-html

v-html会把html字符串渲染成标签

<div v-html="str"></div>

2、v-text

v-text会转义，不会渲染成标签

<div v-text="str"></div>

<script>
    const app = new Vue({
      el: '#app',
      data: {
        num: 1,
        str: '<h1>title</h1>'
      }
    })
 </script>

 

3、v-if ，v-else ，v-else-if

v-if和v-else必须用在相邻的兄弟元素中

v-if是通过是否渲染DOM元素来决定显示

<p v-if="isShow > 0">这是一段文字</p>
<p v-else-if="isShow < 0">这是第二段文字</p>
<p v-else>这是第三段文字</p>

4、v-show

v-show是通过display属性来决定元素的显示

<p v-show="isShow > 0">v-show案例</p>

<script>
    const app = new Vue({
      el: '#app',
      data: {
        isShow: 0
      }
    })
 </script>

5、v-for

v-for可以遍历数组，对象，字符串

<ul>
      <li v-for="(item, index) in arr">{{index}}: {{item}}</li>
 </ul>

<script>

    const app = new Vue({

      el: '#app',

      data: {

        arr: [1,3,4,5,6,7]

      }

    })

  </script>

6、v-on

用来绑定事件

v-on:click可以简写为@click

<button v-on:click="isShow = !isShow">显示/隐藏弹框</button>

7、v-cloak

v-cloak属性是vue实例化之前存在，之后就自动消失

8、v-bind

v-bind可以用来绑定任意属性，包括自定义属性

v-bind:src 可以简写为 :src

<img v-bind:src="user.avatar" v-bind:alt="user.name" :title="user.name">

9、v-model

表单双向绑定选中的value值

<input type="text" v-model="value">