今天和大家分享一下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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。