VueJS---常用指令

1、v-once

该指令后面不需要跟任何表达式;表示元素和组件只渲染一次,不会随着数据的改变而改变。

 <h1 v-once>{{str}}</h1>
2、v-html

在某些情况下,从服务器请求到的数据本身就是一个HTML代码,如果直接通过高{{}}来输出,会将HTML代码一起输出,所以可以使用v-html进行解析出来并且进行渲染。

<div id= 'vue' >
  <h2>{{url}}</h2>
  <h2 v-html="url"></h2>
</div>
  <script>
    let vm = new Vue({
      el: '#vue',
      data:{
        url: '<a href = "https://www.baidu.com/">百度一下</a>'
      }
    })
  </script>
3、v-pre

用于跳过这个元素和它自元素的编译过程,用于显示原本的Mustache语法。

<div id= 'vue' >
  <h1>{{str}}</h1>
  <h2 v-pre>{{str}}</h2>
</div>
  <script>
    let vm = new Vue({
      el: '#vue',
      data:{
        str: '只执行一次',
      }
    })
  </script>
4、v-text

v-text作用和Mustache比较相似,都是用于将数据显示在界面中,但是此方法没有Mustache好用,尤其是在字符串拼接时。

 <h1 v-text="str"></h1>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容