版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/soulwyb/article/details/85769779
1. 插值表达式
<!DOCTYPE html>
<html>
<head>
<title>模板语法</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
{{name}}
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
name: "Dell"
}
})
</script>
</html>2.v-text:
<!DOCTYPE html>
<html>
<head>
<title>模板语法</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div v-text="name"></div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
name: "Dell"
}
})
</script>
</html>3.v-html:
<!DOCTYPE html>
<html>
<head>
<title>模板语法</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div v-html="name"></div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
name: "Dell"
}
})
</script>
</html>v-html与v-text的区别在于 v-html会渲染HTML代码，而v-text不会 举例：
<!DOCTYPE html>
<html>
<head>
<title>模板语法</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div v-text="name"></div>
<div v-html="name"></div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
name: "<h1>Dell</h1>"
}
})
</script>
</html>
v-text相当于插值表达式的内容。 一般情况下 v-text="name" == {{name}}
这3种基本的模板语法中的内容不是字符串 而是js表达式 举例：
<!DOCTYPE html>
<html>
<head>
<title>模板语法</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
{{name + ' Lee'}}
<div v-text="name + ' Lee'"></div>
<div v-html="name + ' Lee'"></div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
name: "Dell"
}
})
</script>
</html>