指令

Vue提供一系列以 v-on 开头的属性，我们把这些属性称之为“指令”。

1、v-text

v-text也可以用于数据渲染，但是该指令所对应的数据，会将标签中原本的数据给覆盖掉。

<h3 v-text="msg">100</h3>

  new Vue({
        el:'#app',
        data(){
            return {
                msg:'hello'
            }
        }
    })

2、v-html

v-html 也可以用于数据渲染，它和 v-text、双大括号的区别在于，v-html可以识别数据中的HTML代码。

<div id="app">
        <h1>{{msg}}</h1>
        <h3 v-text="msg">100</h3>
        <h3 v-html="msg">100</h3>
</div>

  new Vue({
        el: '#app',
        data() {
            return {
                msg: '<a href="###">hello</a>'
            }
        }
    })

结果图： 

 

3、v-show

v-show指令通过指令值的真或假，来设置元素的 display 属性。

指令值为真：display为block

指令值为假：display为none

示例：

<div id="app">
        <h1 v-show="isShow">{{msg}}</h1>
        <h3 v-text="msg">100</h3>
        <h3 v-html="msg">100</h3>
        <button v-on:click="isShow = !isShow">显示/隐藏</button>
</div>

 new Vue({
        el: '#app',
        data() {
            return {
                msg: '<a href="###">hello</a>',
                isShow:true
            }
        }
    })

效果：

指令v-show-CSDN直播指令v-show的使用https://live.csdn.net/v/219885

4、v-on

<button v-on:click="isShow = !isShow">显示/隐藏</button>
<!-- 可简写为 -->
<button @click="isShow = !isShow">显示/隐藏</button>

5、v-bind

当我们需要给标签身上的属性设置动态的数据时，就需要通过 v-bind 来设置该属性。

<a v-bind:href="link">百度一下</a>
<!-- 可简写为 -->
<a :href="link">百度一下</a>