1.基本模板语法,可以使用{{}}来进行渲染
<div id="app"> <!--app为实例el的属性-->
{{text}}
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
text:"这是一段呗渲染到HTML中的数据"
}
})
</script>
2.插值v-html
因为{{}}只能解析纯文本的形式,所以要解析非纯文本形式的话就需要用到v-html来进行解析html
<div id="app">
<div v-html="messgae"></div>
<p>您好:{{name}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
message:'用户名<input type="text" value="姓名" />'+'密码<input type="password"/>'
}
})
</script>
3.表达式
Vue支持所有JavaScript的所有表达式
- {{ number + 1 }}
- {{ ok?‘yes’ :‘no’ }}
- {{ message.split('').reverse().join('') }}
- <div v-bind:id="'list-'" + id></div>