1.显示结果
在两个花括号之间之间引用变量名就可以了
<div id="app">
{{message}}
</div>
<script>
var app=new Vue({
el:'#app',
data:{
message:'Hello Vue!',
}
})
}
</script>
2.IF判断
使用 v-if 来判断是否显示该标签,可以结合事件来改变结果,当 app.seen为true时标签显示,当app.seen为false时标签不显示
<div id="app">
<div v-if='seen'>显示</div>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
seen:true
}
})
</script>
3.FOR循环
使用 v-for 来显示该循环标签
<div id="app">
<ol>
<li v-for="i in strs">{{i.title}}:{{i.int}}</li>
</ol>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
strs:[
{title:'13131',int:123},
{title:'12324',int:456}
]
}
})
</script>
4.输入
使用 v-model 来显示该循环标签,并将输入结果与变量"message"的值进行绑定
<div id="app">
{{message}}
<input v-model='message'>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
message:'Hello Vue!',
})
</script>