插值
#文本
数据绑定最常见的形式就是使用“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>
最后是交流公众号，大家可以关注一下
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/119165.html
