2018-09-12
v-model:双向数据绑定，用于表单元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="itany">
<input type='text' v-model='name'>
<p>{{name}}</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
name:'lzgxh',
num:''
}
})
</script>
</body>
</html>
屏幕展示：
![]()
1.png
1.png
v-on:事件名="函数名" (v-on:click="alt")；绑定事件
<!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="vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
msg:'hollo'
},
methods:{
alt:function(){
alert(000)
console.log(this.msg)
}
}
})
</script>
</body>
</html>
屏幕展示：
![]()
2.png
2.png
v-on:click="函数名"，点击按钮来回切换；
<!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='h'>on</button>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
msg:'heihei',
flag:true
},
methods:{
h:function(){
/* this.msg='aaa' */
if(this.flag){
this.msg='idh',
this.flag=false
}else{
this.msg='heihei',
this.flag=true
}
}
}
})
</script>
</body>
</html>
屏幕展示：
![]()
3.png
3.png
4.png
v-model=''; v-on:click='函数名'; v-for=''
<!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="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>
屏幕展示：效果:点击添加删除
5.png
2018-09-13
v-bind:属性名="值"; v-bind:src="url"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="itany">
<img v-bind:src="url">
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
url:'icon1.png'
}
})
</script>
</body>
</html>
屏幕显示：用v-bind:src='url'添加一张图片
v-bind:src='url',v-on:click='函数名'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="itany">
<img v-bind:src="url" alt="" v-on:click='hs'>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
url:'icon1.png'
},
methods:{
hs:function(){
this.url="page2-img1.jpg"
}
}
})
</script>
</body>
</html>
屏幕显示：点击图片来回切换
v-bind:src='url',v-on:click='函数名' ，v-for=''循环数组对象数组对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="itany">
<img v-bind:src="url" alt="">
<ul>
<li v-for='(value,index) in arr' v-on:click='cha(index)'>{{index+1}}</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
arr:['s5.jpg','s6.jpg','s7.jpg','s8.jpg','s9.jpg'],
url:'s5.jpg'
},
methods:{
cha:function(i){
this.url=this.arr[i]
}
}
})
</script>
</body>
</html>
选项卡：点击数字来回切换图片
6.png
v-show=‘’ 控制元素的显示和隐藏使用display:none隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="itany">
<h1>{{one}}</h1>
<h3 v-show='!two'>{{two}}</h3>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
one:'good',
two:true
}
})
</script>
</body>
</html>
屏幕展示：
![]()
7.png
7.png
v-on:click='函数名'， v-show=''控制元素的现实和隐藏 使用display:none隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#a{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="itany">
<button v-on:click='ch'>点击</button>
<div id="a" v-show='see'></div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
see:true
},
methods:{
ch:function(){
this.see=!this.see
}
}
})
</script>
</body>
</html>
屏幕显示：效果：点击按钮（隐藏显示）
8.png
v-if=''
v-else-if=''
v-else-if=''
v-else=''
[随机出现：num:Math.floor(Math.random()*(max-min+1)+min)]
<!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="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>
屏幕显示：刷新页面随机出现其一
![]()
9.png
9.png
10.png
