模板语法对于高效的编写web页面提供了便利。如果你有其他框架或者模板引擎的学习经验那么对于Vue.js的模板语法会很快的上手。当然如果没有其他的学习经验，也不用担心，Vue.js的社区文档写的很详细，花点时间阅读以下就明白了。
一、插值
如何将一个值在html元素中展示？正常的情况下使用
{{}}两个花括号；但是这个不是银弹如果是要展示html代码呢？对于html代码，{{}}会将解析为普通的文本。
你可以直接复制如下代码，查看运行效果，这里呈现的都是正确的结果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板语法</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--利用“{{}}”双花括号取值-->
<p>{{message}}</p>
<!--渲染html代码-->
<div v-html="myTag"></div>
</div>
</body>
</html>
<script type="text/javascript">
//定义data数据，数据类型是Json对象
var data = {message:"我是单纯的文字信息",myTag:'<p style="color: red">Hello world!</p>'};
//创建Vue实例
var app =new Vue({
el:'#app',
data:data
})
</script>
如果你想尝试一下使用{{}}来渲染html代码，你会发现那些代码并没有被正确的解析。这时候可以使用v-html来处理。效果如下：
正确渲染效果
网友评论