-
v-show：根据条件展示元素的选项，控制元素的显示或隐藏
例:<div id='itany'> <h1>{{msg}}</h1> <h3 v-show='!see'>{{msg}}</h3> </div> <script src='js/vue.js'></script> <script> new Vue({ el:"#itany", data:{ msg:'hello vue', see:true } }) </script> v-bind:属性名='事件名' 绑定属性
<a v-bind:href="url">...</a>
实例：点击图片切换
<body>
<div id="itany">
<img v-bind:src="url" v-on:click='ack'alt="">
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
url:'4.gif',
flag:true
},
methods:{
ack:function(){
if(this.flag){
this.url='4.gif'
this.flag=false
}else{
this.url='5.gif'
this.flag=true
}
}
}
})
</script>
</body>
-
v-if v-else v-els-if：
条件判断使用 v-if 指令，
可以用 v-else 指令给 v-if 添加一个 "else" 块，
v-els-if用作 v-if 的 else-if 块。可以链式的多次使用，
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
实例：<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>
