Day7——v-once、v-html、v-text、v-pre指令的使用

一. 回顾

前面学习了Day6——插值操作——mustache语法，今天学习v-once、v-html、v-text、v-pre指令。

二. 其他指令的使用

2.1 v-once指令

作用：变量不会随着数据的改变而改变。即不会响应式。

例子：

<div id="app">
  <h2>{{message}}</h2>
  <h2 v-once>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

2.2 v-html指令

作用：有时某个变量是带有<a>标签的字串，使用v-html可以将此<a>标签提取出来

例子:

<div id="app">
  <h2 v-html="url"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      url: '<a href="http://www.baidu.com">百度一下</a>'
    }
  })
</script>

效果：

2.3 v-text指令

作用：将变量的值展示在标签对之间

例子：

<div id="app">
  <h2 v-text="message"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

效果：

2.4 v-pre指令

作用：不希望vue解析此字串

例子:

<div id="app">
  <h2 v-pre>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

效果：