模板语法
1.差值表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板语法</title>
<script src = './vue.js'></script>
</head>
<body>
<div id ='app'>
{{name}}
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
name:'Dell'
},
})
</script>
</body>
</html>
差值表达式就是格式如 {{ }}
输出:
2.v-text
换一种写法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板语法</title>
<script src = './vue.js'></script>
</head>
<body>
<div id ='app'>
<div v-text="name"></div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
name:'Dell'
},
})
</script>
</body>
</html>
输出:
3.v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板语法</title>
<script src = './vue.js'></script>
</head>
<body>
<div id ='app'>
{{name}}
<div v-text="name"></div>
<div v-html="name"></div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
name:'<h1>Dell</h1>'
},
})
</script>
</body>
</html>
输出: