vue指令系统之文本指令

目录

• 什么是指令系统
• 文本指令
  • v-text指令
  • v-html指令
  • v-show
  • v-if

什么是指令系统

• 指令系统是VUE提供的，语法为 v-xx 写在标签属性中的，系统都称之为指令

文本指令

• 文本指定必须写在标签属性上
• 文本指定的值必须为变量，或者表达式

v-xx # 必须是一个标签属性
<p v-text="a_url"></p>

v-xx="变量/静态式"

v-text指令

• 如：a_url必须是data中定义的变量

<div id="app">
    <p v-text="a_url"></p>

</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            a_url: '<a href="http://www.baidu.com">点我</a>'
        }
    })
</script>

渲染结果会把v-text中的内容，渲染到标签内部：

<p>
<a href="www.baidu.com">点我</a>
</p>

# 等同于:
# <p>{{a_url}}</p>

v-html指令

<div id="app">
    <p v-text="a_url"></p>
    <p v-html="a_url"></p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            a_url: '<a href="http://www.baidu.com">点我</a>'
        }
    })
</script>
# 把字符串的内容渲染成标签，添加到标签内部

v-show

# 布尔值，定义标签是否显示
# 注意，v-show的值需要是一个变量定义的，在script中定义
# 如果show为false，则此标签会不显示，前台样式为  style="display: none"
<h2>v-show</h2>
<img src="" alt="" v-show="show">

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            a_url: '<a href="http://www.baidu.com">点我</a>',
            show: true
        }
    })
</script>

v-if

• 与v-show作用一样，用于指定标签是否显示
• 与v-show方法一样，需要使用变量指定true或者false
• 但是v-if的方法，如果更改变量show为false，则会直接删除整标签，改回为true，则会将标签添加回来
• 效率不如v-show

<h2>v-if</h2>
<img src="xxx" alt="" v-if="show">

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            a_url: '<a href="http://www.baidu.com">点我</a>',
            show: true
        }
    })
</script>