Vue – 页面渲染指令大全

内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个：

1.v-text

用法：

<p v-text="foo"></p>

<!-- 在vm中加入data数据foo -->

const vm = new vue({
  data:{
     foo:"text数据"
   }
})

输出 <p>text数据</p>

注意：v-text 指令会覆盖元素内默认的值。

2.{{ }}

vue 提供的 {{ }} 语法，专门用来解决v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达 式（英文名为：Mustache）。

<p>{{ foo }}</p> 

<!-- 在vm中加入data数据foo --> 

const vm = new vue({ 
    data:{ 
     foo:"text数据" 
     }
 })

输出 <p>text数据</p>

注意：插值语法不可使用在标签属性里，只能使用在标签内容中

JS表达式

在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持 Javascript 表达式的运算

3.v-html

v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的HTML 元素，  则需要用到v-html 这个指令：

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

const vm = new Vue({
      el: '#app',
      data: {
        foo: '<h2>v-html数据</h2>'
      }
    })

输出:<p><h2>v-html数据</h2></p>