Vue-模板语法
作者：互联网
今天和大家分享一下Vue里的模板语法，这部分的内容比较基础，而且也很好理解。
文本
使用Vue自带的插值语法进行书写
{{}}
注意：
我们可以在双括号里填写
状态(vue实例里data里的值)，比如在Vue实例中，有个状态叫做msg，我们可以这样用它：{{msg}}
识别html标签
使用v-html指令，可以非常容易让Vue知道你在这个地方是要渲染一个DOM节点的。
<div v-html="html"></div>
案例
<body>
<div class="box">
{{username}}
<div v-html="html"></div>
</div>
</body>
</html>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: ".box",
data() {
return {
username: "xm",
html: '<h1>我是h1标签</h1>'
}
}
})
</script>
使用JavaScript表达式
表达式：加减乘除，三元运算符，与或非
vue提供了完全的javaScript的数据支持
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{age+1}}:{{age>5?"成年":"未成年"}}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式。
注意：
在插值表达式中，建议不要放太复杂的表达式，因为插值语法本来就是渲染数据的。数据处理可以放到计算属性里去做。
标签：Vue,实例,插值,语法,html,模板,表达式 来源： https://www.cnblogs.com/liyublogs/p/16544789.html