插值
#文本
数据绑定最常见的形式就是使用“Mustache”语法(双大括号)的文本插值
<span>Message:{{msg}}</span>
Mustache标签将会被替代为对应数据对象上 msg 属性的值。无论何时,绑定的数据对象上 msg 属性发生改变,插值处的内容都会更新。
当然,通过v-once指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其他数据绑定。
<span v-once>这个将不会改变: {{ msg }}</span>
#原始HTML
双大括号会将数据解释为普通文本,而非HTML代码。为了输出真正的HTML代码,需要使用 v-html 指令:
浏览器:
这个span 的内容将会被替换成为property值 htmlMsg,直接作为HTML—会忽略解析property值中的数据绑定。注意,你不能使用 v-html 指令来解析符合局部模板,因为vue不是基于字符串的模板引擎。反之,对于用户界面(UI),组件更适合作为可重用和可组合的基本单位。
你的站点上动态渲染的任意HTML可能会非常危险,因为它很容易导致xss攻击。请只对可信内容使用html插值,绝不要对用户提供的内容使用插值
#Attribute(特性)
Mustache语法不能作用在HTML Attribute上,遇到这种情况应该使用v-bind指令:
如Id、clas、其他属性值
<button v-bind:disabled="isButtonDisabled">Button</button>
迄今为止,在我们的模板中,我们一直都只绑定简单的 property 键值。但实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。
<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}
总体代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo3</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span v-once>Message:{{msg}}</span>
<div>使用 mustaches :{{htmlMsg}}</div>
<div>使用 v-html 指令: <span v-html="htmlMsg"></span></div>
<button v-bind:disabled="isButtonDisabled">Button</button>
<div>{{ number + 1 }}</div>
<div>{{ number2 + 1 }}</div>
<div>{{ ok ? 'YES' : 'NO' }}</div>
<div>{{ ok2 ? 'YES' : 'NO' }}</div>
<div>{{ msg.split('').reverse().join('') }}</div>
<div v-bind:id="'list-' + id"></div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg:'Hello World',
htmlMsg:'<span style="color: red;">这是Html代码</span>',
isButtonDisabled:false,
id :'app-2',
number:1,
number2:'2',
ok:true,
ok2:false
}
})
</script>
</html>
最后是交流公众号,大家可以关注一下