v-model
2018-09-13 本文已影响0人
有你相伴一生
一.v-model的解释：
双向数据绑定，常用于表单元素例如input元素
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="a">
<input type="text" v-model='msg'>
<p>{{msg}}</p>
</div>
<script src="[js/vue.js](js/vue.js)"></script>
<script>
new Vue({
el:'#a',
data:{
msg:'hello'
}
})
</script>
</body>
</html>
屏幕显示：
Document_01.gif
二.v-on的解释：
绑定一个事件 格式：v-on：事件名=‘函数名’
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="itany">
<button v-on:click='alt'>按钮</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
msg:"hello"
},
methods:{
alt:function(){
alert(111)
}
}
})
</script>
</body>
</html>
屏幕效果：当点击按钮时，会出现弹出框111
三.简单的效果：
1.点击切换：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="s">
<p>{{msg}}</p>
<button v-on:click="d">按钮</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#s',
data:{
msg:'hello word'
},
methods:{
d:function(){
this.msg='hello vue'
}
}
})
</script>
</body>
</html>
2.点击来回切换：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p>{{msg}}</p>
<button v-on:click="chg">按钮</button>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
msg:'hello word'
},
methods:{
chg:function(){
if(this.flag){
this.msg='hello vue',
this.flag=false
}else{
this.msg='hello word'
this.flag=true
}
}
}
})
</script>
</body>
</html>
3.添加列表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<input type="text" v-model='txt'> <button v-on:click='add'>添加</button>
<ul>
<li v-for="(value,index) in arr">
{{value}}
<button v-on:click='delt(index)'>删除</button>
</li>
</ul>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
arr:['吃饭','睡觉','打游戏'],
txt:''
},
methods:{
add:function(){
this.arr.push(this.txt),
this.txt=''
},
delt:function(ind){
this.arr.splice(ind,1)
}
}
})
</script>
</body>
</html>
四.v-bind的解释：
绑定属性的 格式：v-bind:属性名=‘值’
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
background: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="a">
<img v-bind:src="url" alt="">
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#a',
data:{
url:'img/16145_100.gif'
}
})
</script>
</body>
</html>
屏幕显示：
1t_01.gif
两张图片切换效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="s">
<img v-bind:src="url" alt="" v-on:click="d">
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#s",
data:{
url:"img/16145_100.gif"
},
methods:{
d:function(){
this.url='img/16147_100.gif'
}
}
})
</script>
</body>
</html>
显示出来的效果：
会先出现：
2_01.gif
然后会出现：
3_01.gif
多张图片相互切换：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
overflow: hidden;
}
li{
width:42px;
height: 42px;
border:1px solid #000;
float:left;
text-align: center;
list-style: none;
line-height:42px;
}
img{
width: 220px;
height: 220px;
margin-left: 40px;
}
</style>
</head>
<body>
<div id="itany">
<img v-bind:src="url" alt="">
<ul>
<li v-on:click="a(index)" v-for='(value,index) in arr'>{{index+1}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
url:'img/16147_100.gif',
arr:['img/16150_100.gif','img/16149_100.gif','img/16148_100.gif','img/16146_100.gif','img/16145_100.gif']
},
methods:{
a:function(i){
this.url=this.arr[i]
}
}
})
</script>
</body>
</html>
屏幕效果：当点击相应数字时会出现相应的图片
五.
1v-show:控制元素的显示和隐藏，使用的是display：none隐藏，会把元素部分删除，控制台里面的会存在
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d{
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div id="itany">
<button v-on:click="a">现实与隐藏</button>
<div id="d" v-show="see"></div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
see:true
},
methods:{
a:function(){
this.see=!this.see //!取反操作 ！表示与原意相反
}
}
})
</script>
</body>
</html>
2.v-if 同样可以控制元素的显示和隐藏，使用的是visibility:hidden,会把元素全部删除，控制台里面也不存在
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d{
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div id="itany">
<button v-on:click="a">现实与隐藏</button>
<div id="d" v-if="see"></div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
see:true
},
methods:{
a:function(){
this.see=!this.see
}
}
})
</script>
</body>
</html>
visibility:hidden与display：none的区别：
1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。
六.v-if , v-else, v-else-if条件语句：
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p v-if='num==0'>00000000000</p>
<p v-else-if='num==1'>1111111111</p>
<p v-else-if='num==2'>22222222</p>
<p v-else='num==5'>555555555555</p>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
// num:Math.floor(Math.random()*(max-min+1)+min)
num:Math.floor(Math.random()*(5-0+1)+0)
}
})
</script>
</body>
</html>
随机数公式：:Math.floor(Math.random()*(max-min+1)+min)
