vue v-show v-bind v-if v-

2018-09-14 本文已影响0人北城_以念

1.

v-show和v-if都可以控制元素的显示或隐藏

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>

QQ图片20180913145953.png

例：点击显示和隐藏

<!DOCTYPE html>
<html lang="en">
 <head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    p{
        display: block;
        width: 200px;
        height: 200px;
        background: #aaa;
    }
</style>
</head>
<body>
 <div id="asd">
   <button v-on:click='alt'>显示、隐藏</button>
   <p v-show='see'></p>
 </div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#asd',
        data:{
            see:true
        },
        methods:{
            alt:function(){
                this.see=!this.see;
            }
        }
    })
</script>
</body>
</html>

QQ图片20180913150936.png

2.v-bind

v-bind：属性名='事件名' 绑定属性

例：点击图片即可切换

<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>

QQ截图20180913151814.png

例：v-bind 点击标签切换图片

  <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    ul li{
        float: left;
        list-style: none;
        padding: 10px 20px;
        border: 1px solid;
    }
</style>
</head>
<body>
 <div id="itany">
   <img v-bind:src="url" alt="">
   <ul>
       <li v-for='(value,index) in arr' v-on:click='chg(index)'>{{index+1}}</li>
   </ul>
 </div>
 <script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#itany',
        data:{
//                arr:[1,2,3,4,5]
            url:'0.jpg',
            arr:['0.jpg','index.jpg','5.gif']
        },
        methods:{
            chg:function(ind){
            this.url=this.arr[ind]
        }
        }
    })
</script>
</body>
</html>

QQ截图20180913153024.png

3.

条件判断使用 v-if 指令，
可以用 v-else 指令给 v-if 添加一个 "else" 块，
v-els-if用作 v-if 的 else-if 块。可以链式的多次使用，
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
例：

<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>