事件
2018-09-16 本文已影响0人
久伴你_e537
<div id="app">
<input type="text" v-model="msg">
<p>{{msg}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'adw'
}
})
</script>
image
v-model:="" 双向数据交互，多用于表单
<div id="app">
<button v-on:click="alt">我是按钮</button>
</div>
new Vue({
el:"#app",
data:{
txt:'js'
},
methods:{
alt:function(){
alert("我是弹窗")
}
})
QQ拼音截图未命名.png
QQ拼音截图未命名.png
v-on:事件="函数名"
<div id="app" v-on:click="an">
<img v-bind:src="url" alt="">
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
url:'download.jpg',
flag:true
},
methods:{
an:function(){
if(this.flag){
this.url='1.jpg',
this.flag=false
}else{
this.url='download.jpg',
this.flag=true
}
}
}
})
</script>
QQ拼音截图未命名.png
点击图片能够切换图片
v-bind 用于绑定属性
<div id="app">
<h1 v-show="see" >对</h1>
<h1 v-show="!see">错</h1>
<button v-on:click="an">点击切换</button>
<p v-show="see"></p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
see:true
},
methods:{
an:function(){
/*if(this.see){
this.see=false
}else{
this.see=true
} 方法一*/
this.see=!this.see //方法二
}
}
})
</script>
QQ拼音截图未命名.png
点击按钮隐藏红色方块
v-show 显示隐藏，用display:none来隐藏元素
v-if
<div id="app">
<p v-if="num==0">00000000</p>
<p v-else-if="num==1">111111111</p>
<p v-else-if="num==2">22222222</p>
<p v-else-if="num==3">3333333</p>
<p v-else-if="num==4">44444444</p>
<p v-else="num==5">555555</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js">
<script>
new Vue({
el:'#app',
data:{
num:Math.fooor(Math.random()*(5-0+1)+0)//此处为随机数
//随机数公式为num:Math.floor(Math.random()*(max-min+1)+min)
}
})
</script>
v-if控制元素的显示与隐藏，但与v-show不同的是，v-if、v-else、v-else-if是使用visibity:hidden；v-if显示隐藏是将dom元素整个添加或删除
v-if,v-else,v-else-if 于原生js一样
display:none与visibity:hidden的区别：
display:none是将元素完全隐藏，并且元素不占用页面空间，所占空间会被其它元素占用，功能完全消失（不保留物理空间）
visibity:hidden是将元素隐藏，所占用空间不变，只是不显示元素，功能完全消失（保留物理空间）
