一，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>
注：专门储存函数的是：methods
添加：push
删除：splice
display:none;与visiblity:hidden;的区别
相同：
1、两者都能隐藏元素。
不同：
1、display:none 不占页面空间，visiblity:hidden 占据原先页面空间。
这里必须说明的是，元素不占页面空间后，取该元素或其内部元素的宽高值永远是0。如果想隐藏又想取到宽高值，那就得用visiblity:hidden。
2、display:none 的子元素也一定无法显示，visiblity:hidden 的子元素可以设置显示。
display:none元素及其子元素都将隐藏，而visiblity:hidden元素的子元素却可以设置visibility: visible 显示出来。在这一点上，如果页面是比较复杂或者是不受控制的，就要慎重使用visiblity:hidden，因为保不齐哪个元素被设置成可见，影响显示效果。
3、display:none 引起页面重绘和回流， visiblity:hidden 只引起页面重绘。
visiblity:hidden 看起来的性能比display:none好些，在两者都能使用情况下，可先考虑visiblity:hidden。但也不用千方百计用visiblity:hidden，用哪个还是看需求，性能优化只是其中一部分，莫要本末倒置。
网友评论