1
v-bind:属性名=' ' 绑定一个属性 简写为 :属性名='值'
<!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='chg'>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:"#itany",
data:{
url:'img/1.jpg',
flag:true
},
methods:{
chg:function(){
if(this.flag){
this.url='img/2.jpg';
this.flag=flase;
}else{
this.url='img/1.jpg',
this.flag=true
}
}
}
})
</script>
</script>
</body>
</html>
2
v-show="" v-if=""控制元素的显示或隐藏 v-show相当于display:none v-if相当于visibility:hidden; visibility:hidden;元素虽然被隐藏了但是仍然占据原来所在的位置 当元素被隐藏后就不能再接受其他事件了 display:none;元素被隐藏了 其后面的元素自动占据其位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:100px;
height:100px;
background: #f00;
}
</style>
</head>
<body>
<div id="itany">
<button v-on:click='chg'>点击切换 </button>
<div class="box" v-show='see'></div>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:"#itany",
data:{
see:true
},
methods:{
chg:function(){
this.see=!this.see
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="itany">
<p>{{msg}}</p>
<h1 v-show="!see">{{msg}}</h1>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
msg:'hello vue',
see:true
}
})
</script>
</body>
</html>
3
v-if v-else-if v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p v-if="num==0">0000000000000000</p>
<p v-else-if="num==1">111111111111</p>
<p v-else-if="num==2">2222222222222</p>
<p v-else-if="num==3">333333333333</p>
<p v-else-if="num==4">444444444444</p>
<p v-else='num==5'>55555555555555555</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>
