2018-09-12
v-model:雙向數(shù)據(jù)綁定诚啃，用于表單元素躬审。
<!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:事件名="函數(shù)名" (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="函數(shù)名"溯捆，點(diǎn)擊按鈕來回切換仲墨；
<!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='函數(shù)名'; 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>
屏幕展示：效果:點(diǎn)擊添加刪除
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='函數(shù)名'
<!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>
屏幕顯示：點(diǎn)擊圖片來回切換
v-bind:src='url',v-on:click='函數(shù)名' ，v-for=''循環(huán)數(shù)組對(duì)象數(shù)組對(duì)象
<!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>
選項(xiàng)卡：點(diǎn)擊數(shù)字來回切換圖片
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='函數(shù)名'疏遏， v-show=''控制元素的現(xiàn)實(shí)和隱藏 使用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'>點(diǎn)擊</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>
屏幕顯示：效果：點(diǎn)擊按鈕（隱藏顯示）
8.png
v-if=''
v-else-if=''
v-else-if=''
v-else=''
[隨機(jī)出現(xiàn)：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>
屏幕顯示：刷新頁面隨機(jī)出現(xiàn)其一
![]()
9.png
9.png
10.png
