vue中的常用指令二

一：v-model

v-model双向数据绑定，用于表单元素

                                                                                        //html
<div id="app">
    {{mass}}
    <input type="text"  v-model="mass">
    <button v-on:click="fun()"></button>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    var app=new Vue({
        el:'#app',//绑定一个元素，选择器
        data:{
            mass:'asdf',
            arr:1
        },

    })
</script>

二、v-on绑定事件

v-on：事件名=“函数名”

<div id="app">
    {{mess}}
    <button v-on:click="but">绑定事件</button>
</div>

点击按钮弹框

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            name:'hello vue'

        },
        methods:{
            but:function(){
               // alert(this.name)
                alert(app.name)
            }
        }
    })
</script>

点击按钮更换文字

<script>
    var app=new Vue({
        el:'#app',
        data:{
            mess:'wwwww',
            mass:'asdfa'

        },
        methods:{
            but:function(){
                /*this.mess='我是谁'*/
                this.mess=this.mass
            }
        }
    })
</script>

三、v-show控制元素的现实与隐藏

v-show=“ ” 使用display：none隐藏

<div id="app">
    <h1>{{mas}}</h1>
    <h4 v-show="massage">{{mas}}</h4><!--asdf-->
    <h4 v-show="!massage">{{mas}}</h4><!--后台输出fasle-->
</div>

<script src="js/vue.js"></script>//下载后的链接
<script>
    new Vue({
        el:'#app',
        data:{
            mas:"asdf",
            massage:true
        }
    })
</script>

复习函数调用
&& 与：两个条件都对则为对
|| 或：一个条件对则为对

<script>
var a=3;
var b=4;
console.log(a>4||b>4)
//true
</script>

！非：取反

<script>
console.log(!true);
//flase
</script>

练习v-show

Image 1.png

点击隐藏按钮把下面的div隐藏
代码如下：

<div id="itany">
    <button v-on:click="fun">转换</button>
    <div v-show="see"></div>
</div>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#itany",
        data:{
            va:'隐藏',
            see:true
        },
        methods:{
            fun:function(){
                //第一种方法
                if (this.see){
                    this.see=false
                }else {
                    this.see=true
                }
                //第二种方法
                //this.see=!this.see
            }
        }

    })
</script>

四、v-if、v-else、v-else-if控制元素的显示与隐藏

同样是控制元素的显示与隐藏，但与v-show不同的是，v-if、v-else、v-else-if是使用visibity:hidden；它直接把元素从Dom中删除。下面会讲到display:none与visibity:hidden的区别

<div id="itany">
    <p v-if="num==0">00000000</p>
    <p v-else-if="num==1">111111111</p>
    <p v-else-if="num==2">22222222</p>
    <p v-else-if="num==3">3333333</p>
    <p v-else-if="num==4">44444444</p>
    <p v-else="num==5">555555</p>
</div>
//v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
//v-else-if也同样必须紧跟在带 v-if 或者 v-else-if 的元素之后

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#itany',
        data:{
            num:Math.fooor(Math.random()*(5-0+1)+0)//此处为随机数
          //随机数公式为num:Math.floor(Math.random()*(max-min+1)+min)

        }


    })
</script>

display:none与visibility:hidden的区别：

display:none是将元素完全隐藏，并且元素不占用页面空间，所占空间会被其它元素占用，功能完全消失（不保留物理空间）
visibility:hidden是将元素隐藏，所占用空间不变，只是不显示元素，功能完全消失（保留物理空间）

五、v-bind 绑定属性

v-bind：属性名=“值”

<div id="itany">
    <img v-bind:src="url" alt="" v-on:click="fun" v-bind:title="tit">
</div>

点击图片时更换一次图片

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#itany',
        data:{
            url:'image/avatar-dhg.png',
            tit:'这是一张图片',
            url1:'image/avatar-mdo.png'//更换一次
           
        },
        methods:{
            fun:function(){
               this.url=this.url1//更换一次
            }
        }
    })
</script>

点击图片多次更换图片

<script src="js/vue.js"></script>
<script>
  new Vue({
  el:'#itany',
  data:{
    url:'image/avatar-dhg.png'',
    tit:'这是一张图片',
    url1:'image/avatar-mdo.png'
    see:true
  },
methods:{
  fun:function(){
    if(this.see){
     this.url='image/avatar-dhg.png''
     this.see=false
    }else{
      this.url='image/avatar-mdo.png'
      this.see=true
    }
  }
}
  })
</script>

v-bind练习