- {{number}}:插值表达式,也就是把number的值插入到h1之中;
- v-text="number":h1的内容由number这个变量决定,v-text是Vue中的一个指令,这个指令里面的东西跟着的是一个变量,它告诉h1显示的内容就是"number"这个变量;
- v-html="content":v-html与v-text的区别是,v-html不会转义,而v-text会转译;
- v-on:click="handleClick":通过v-on给元素绑定一个Click事件,事件触发方法。
- v-on:click的简写方法:@click
- v-bind(缩写":")l:单项属性绑定;根据vue实例中data属性,与其中对象的key值相绑定,可修改相应属性的数据
- v-model:双向绑定;div中某一个标签的值发生变化后,可以改变vue实例中data属性相应的对象值,反之相同;
<div id="root" v-on:click="heandleClick">{{texts}}</div>
<script>
new Vue({
el:"#root",
data:{
texts:"hello world"
},
methods:{
heandleClick:function(){
this.texts="1234456"
}
}
})
</script>
<div style="margin-top:10px;" id="roots">
姓:<input v-model="fristName" />
名:<input v-model="lastName"/>
<div>{{fullName}}</div>
<div>{{cont}}</div>
</div>
<script>
new Vue({
el:"#roots",
data:{
fristName:'',
lastName:'',
cont:0,
},
computed:{
fullName:function(){
return this.fristName+''+this.lastName
},
},
watch:{
fristName:function(){
this.cont++
},
lastName:function(){
this.cont++
}
}
})
</script>
<div id="iffor">
<div v-if="contif">hello world</div>
<button @click="handleClick">隐藏</button>
<ol>
<li v-for="(item,index) of lasts" :key="index">{{item}}</li>
</ol>
</div>
<script>
new Vue({
el:"#iffor",
data:{
contif:true,
lasts:[1,2,3,4,5]
},
methods:{
handleClick:function(){
this.contif=!this.contif;
}
}
})
</script>