【v-once】

该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。

<div id="app">
    <h2 v-once>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
      el:'#app',
      data:{
          message: '你好!'
      }
    })
</script>

　　

【v-html】

某些情况下，从服务器请求到的数据的本身就是html代码。

  • 如果我们直接使用{{}}来输出，会将html代码也一起输出。
  • 但是我们希望的是按照html格式进行解析，并且显示对应的内容

如果我们希望解析出html展示，可以使用v-html指令

  • 该指令后面往往会跟上一个string类型
  • 会将string的html解析出来并进行渲染
<div id="app">
    <h2>{{url}}</h2>
    <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><button>普通按钮</button>'
      }
    })
</script>

　　

指令_html