Vue：v-show v-bind v-if v-else v-

2018-09-14 本文已影响0人 LVLIN_1598

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>

Vue：v-show v-bind v-if v-else v-

猜你喜欢

热点阅读