一，v-model
v-model:双向数据绑定 用于表单元素
<div class="box">
<input type="text" v-model="msg"/>
<p>{{msg}}<p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
msg:"hello word"
}
})
</script>
二，v-on：绑定事件
v-on：事件名="函数名"
实现文字的单项切换
1）
<div class="box">
<input type="text" v-model="msg"/>
<p>{{msg}}<p>
<button v-on:click="alt">点击</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
msg:"hello word"
},
methods:{
alt:function(){
this.msg="hello vue"
}
}
})
</script>
2）
<div class="box">
<input type="text" v-model="msg"/>
<p>{{msg}}<p>
<button v-on:click="alt">点击</button>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:".box",
data:{
msg:"hello word"
},
methods:{
alt:function(){
vm.msg="hello vue"
}
}
})
</script>
实现文字的双向切换
方法一
1）
<div class="box">
<input type="text" v-model="msg"/>
<p>{{msg}}<p>
<button v-on:click="alt">上一张</button>
<button v-on.click="abg">下一张</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
msg:"hello word"
},
methods:{
alt:function(){
this.msg="hello vue"
}，
abg:function(){
this.msg="hello word"
}
}
})
</script>
2）
<div class="box">
<input type="text" v-model="msg"/>
<p>{{msg}}<p>
<button v-on:click="alt">上一张</button>
<button v-on.click="abg">下一张</button>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:".box",
data:{
msg:"hello word"
},
methods:{
alt:function(){
vm.msg="hello vue"
},
abg:function(){
vm.msg="hello word"
}
}
})
</script>
方法二
1）
<div class="box">
<input type="text" v-model="msg"/>
<p>{{msg}}<p>
<button v-on:click="alt">点击</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
msg:"hello word",
flag:true
},
methods:{
alt:function(){
if(this.flag){
this.msg="hello vue",
this.flag=flase
}else{
this.msg="hello word"
this.flag=flase
}
}
}
})
</script>
2）
<div class="box">
<input type="text" v-model="msg"/>
<p>{{msg}}<p>
<button v-on:click="alt">点击</button>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:".box",
data:{
msg:"hello word",
flag:true
},
methods:{
alt:function(){
if(this.flag){
vm.msg="hello vue",
vm.flag=flase
}else{
vm.msg="hello word"
vm.flag=flase
}
}
}
})
</script>
三，v-bind绑定属性
v-bind:属性名
图片切换
<div class="box">
<img v-bind:src="url">
<ul>
<li v-for="(value,index) in arr" v-on:click="add(index)">{{index+1}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
arr:["img/1-8-2.jpg","img/jc1209011_7.jpg","img/jc1209011_5a.jpg,. "],
url:"img/1-8-2.jpg"
},
methods:{
add:function(i){
this.url=this.arr[i]
}
}
})
</script>
四，v-show控制元素的显示和隐藏
使用v-show相当于用display：none;来隐藏
``css
<style>
.header{
width: 100px;
height: 100px;
border: 2px solid #000;
background: blue;
}
</style>
``html
<div class="box">
<button v-on:click="hide">点击</button>
<div class="header" v-show="ok"></div>
</div>
``js
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
ok:true
},
methods:{
hide:function(){
if(this.ok){
this.ok=false
}else{
this.ok=true
}
}
}
})
</script>
五，v-if控制元素的显示和隐藏
使用v-if与在css中用visibility：hidden;相同
``css
<style>
.header{
width: 100px;
height: 100px;
border: 2px solid #000;
background: blue;
}
</style>
``html
<div class="box">
<button v-on:click="hide">点击</button>
<div class="header" v-if="ok"></div>
</div>
``js
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
ok:true
},
methods:{
hide:function(){
if(this.ok){
this.ok=false
}else{
this.ok=true
}
}
}
})
</script>
六.使用vue制作的选项卡
new Vue({
el:"#itany",
data:{
card:[
{title:'选项卡1',content:'11111111111111111',flag:true},
{title:'选项卡2',content:'22222222222222222',flag:false},
{title:'选项卡3',content:'33333333333333333',flag:false}
]
},
methods:{
chg:function(ind){
for(var i=0;i<this.card.length;i++){
this.card[i].flag=false;
}
this.card[ind].flag=true;
}
}
})
</script>
display:none;与visiblity:hidden;的区别
相同：
1、两者都能隐藏元素。
不同：
display:none 不占页面空间，visiblity:hidden 占据原先页面空间。
这里必须说明的是，元素不占页面空间后，取该元素或其内部元素的宽高值永远是0。如果想隐藏又想取到宽高值，那就得用visiblity:hidden。
网友评论