1.插值表达式
2.v-text与v-html
v-html 将文本以html指令方式解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body >
<div id = "app">
{{name}}
<span v-html="name"></span> <br>
<span v-text="name"></span>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let ap = new Vue({
el:"#app",//绑定元素
data:{//封装数据
name:'<h1>李白</h1>',
num:1
},
methods:{//封装方法
}
})
</script>
</body>
</html>
显示结果如下
3. 单项绑定与双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body >
<div id = "app">
<!--单项绑定-->
<a v-bind:href="link">百度</a>
<span v-bind:class="{active:isActive,'text-danger':ifError}"
v-bind:style="{color:co,fontSize:si}">zzzz</span><br>
<!--双项绑定-->
<input type="checkbox" v-model='options' value="java">java</br>
<input type="checkbox" v-model='options' value="php">php<br/>
<input type="checkbox" v-model='options' value="c++">c++<br/>
选了 {{options.join(',')}}
</div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let ap = new Vue({
el:'#app',
data:{
link:'http://www.baidu.com',
isActive: true,
ifError: true,
co: 'green',
si: '20px',
options:[]
},
methods:{//封装方法
}
})
</script>
</body>
</html>