vue的插值表达式

vue插值有多种语法, 主要分为4类

• 插入文本
• 插入HTML
• html属性
• js表达式

插入文本

插入文本, 也就是和文本绑定, 使用 {{}} 作为绑定符号

<span>Message: {{ msg }}</span>

这里的 msg 是 data 中的一个值, 比如

new Vue({
    el: "#app",
    data: {
         msg:"这是绑定的消息."
    }
});

如果只想要绑定一次, 那么需要使用 v-once

<span v-once>这个将不会改变: {{ msg }}</span>

此外, 还有一个 v-text 标签, 让你在一个标签中嵌入绑定的数据, 这和{{}}有一定区别与联系, 前者是基于元素的，即 <span v-text="mytext"></span> 等价于 <span>{{mytext}}</span>

插入HTML

插入 html, 无法使用双大括号, 而是 v-html

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

值得注意的是, 这个 v-html 中指定的内容 rawHtml, 它不应该是绑定了 vue 的html, 意味着它不能是复合的 vue 模板，而是原生的html

插入html属性

如果要绑定的值是 html 的属性, 那么使用 v-bind

在vue中，通常使用绑定id，class渲染css，也使用v-bind

<div v-bind:id="dynamicId"></div>

对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：

<button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中。

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

插入js表达式

无论是双括号, 还是绑定html属性, Vue.js 提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。