1.v-model 表单控件元素上创建双向数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="name">
<input type="text" v-model="msg" placeholder="输入内容"/>
<p>{{msg}}</p>
</div>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el:"#name",
data:{
msg:"hello vue"
}
})
</script>
</body>
</html>
2.v-on 绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="name">
<button v-on:click="a">点击</button>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el:"#name",
data:{
msg:"hello vue"
},
methods:{
a:function(){
alert(0)
console.log(this.msg)
}
}
})
</script>
</div>
</body>
</html>
3.v-bind 绑定属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="name">
<img v-bind:src="url" v-on:click="aa"/>
</div>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el:"#name",
data:{
url:"img/banner_5.jpg",
flag:true
},
methods:{
aa:function(){
if(this.flag==true){
this.url="img/banner_5.jpg",
this.flag=false
}else{
this.url="img/banner_1.jpg",
this.flag=true
}
}
}
})
</script>
</body>
</html>
4.v-show 控制元素的显示和隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
li{
list-style: none;
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="name">
<button v-on:click="btn">点击隐藏</button>
<li v-show="see"></li>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#name",
data:{
see:true
},
methods:{
btn:function(){
if(this.see==true){
this.see=false
}else{
this.see=true
}
/* this.see=!this.see*/
}
}
})
</script>
</body>
</html>
5.v-if,v-else,v-else-if 同样用于元素的显示和隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="name">
<p v-if="num==0">111111</p>
<p v-else-if="num==1">333333</p>
<p v-else-if="num==2">444444</p>
<p v-else="num==3">555555</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#name",
data:{
num:Math.floor(Math.random()*(5-0+1)+0)
}
})
</script>
</body>
</html>
6.实例
图片切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
li{
list-style: none;
text-align: center;
float: left;
width: 60px;
border: 1px solid gray;
}
</style>
</head>
<body>
<div id="name">
<img v-bind:src="url" alt= "" />
<ul>
<li v-for="(val,index) in list" v-on:click="btn(index)">{{index+1}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#name",
data:{
url:"img/1.jpg",
list:["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
},
methods:{
btn:function(ind){
this.url=this.list[ind]
}
}
})
</script>
</body>
</html>
添加列表
<!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>
网友评论