模板语法
Vue使用一种基于HTML的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上。所有的Vue模板都是语法层面合法的HTML,可以被符合规范的浏览器和HTML解析器解析。
文本差值
最基本的数据绑定形式是文本插值,它使用的是“Mustache”语法(即双大括号):
<script>
export default {name: 'hello'data() {return {msg: "神奇的语法",hello: "Hello World"}}
}
</script><template><h3>模板语法</h3><p>{{ msg }}</p><p>{{ hello }}</p>
</template>
使用JavaScript表达式
每个绑定仅支持单一表达式,也就是一段能够被求值的JavaScript代码。一个简单的判断方法是否可以合法地写在return后面。
<script>
export default {name: "HelloWorld",data() {return {msg: "神奇的语法",number: 10,ok: true,message: "大家好"}}
}
</script><template><h3>模板语法</h3><p>{{ msg }}</p><p>{{ number + 1 }}</p><p>{{ ok ? 'Yes' : 'No' }}</p><p>{{ message.split('').reverse().join('') }}</p>
</template>
注意
以下这些表达式会在当前活动实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。
<!-- 这是语句,不是表达式:-->
{{ var a = 1 }}<!-- 流程控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}
原始HTML
双大括号将会将数据插值为纯文本,而不是HTML。若想插入HTML,需要使用v-html
指令。
<script>
export default {name: "HelloWorld",data() {return {msg: "神奇的语法",number: 10,ok: true,message: "大家好",rawHtml: "<a href='https://www.baidu.com'>百度</a>",}}
}
</script><template><h3>模板语法</h3><p>{{ msg }}</p><p>{{ number + 1 }}</p><p>{{ ok ? 'Yes' : 'No' }}</p><p>{{ message.split('').reverse().join('') }}</p><p>{{ rawHtml }}</p><p v-html="rawHtml"></p>
</template>