Vue.js入门教程—模板语法(6)

Vue.js入门教程—模板语法(6)

---

一、模板语法

模板语法的主要作用就是，为了格式化输出和显示变量的内容, 主要方式有如下几种：

• {{}}
  Mustache 语法, 可以支持JavaScript的表达方式。
• v-html指令
  以HTML格式输出内容
• v-text指令
  以TEXT方式输出内容

1.1 {{}} Mustache表达式

1.1.1 普通输出

{{message}}  普通输出

<!-- 输出后不再变化 -->
<span v-once>这个将不会改变: {{ message}}</span>

1.1.2 javascript语法

{{ok ? "是":"否"}}
{{number + 1}}
<!-- 调用javascript函数 -->
{{ message.split('') }} 

<!--注意：只支持单个表达式，如下几种不会生效 -->
<!--无效： 这是语句，不是表达式 -->
{{ var a = 1 }}
<!--无效： 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

1.2 v-html

• 变量值

message = "<span>Just do it</span>"

• 定义

<div v-html="message"></div>

• 输出

Just do it

1.3 v-text

v-text和v-html的区别在于，把所有内容当文本直接输出，不会语义化内容。

• 变量值

message = "<span>Just do it</span>"

• 定义

<div v-text="message"></div>

• 输出

<span>Just do it</span>