vue指令

1.v-model:双向数据绑定 用于表单元素

格式：v-model = " "

  <div class="demo">
          <p>{{mes}}</p>
          <input v-model="mes">
   </div>
   var app1 = new Vue({
           el: '.demo',
           data: {
           message: 'hello vue!'
       }
 })

2.v-on：指令添加一个事件监听器（绑定一个事件）

格式：v-on:事件名 = "函数名" （简写：@事件名=“函数名”）

<div class="demo">
 <p>{{msgs}}</p>
 <button v-on:click='btnb'>按钮</button>
</div>
<script src="vue/dist/vue.js"></script>
<script>
 var vm=new Vue({
     el:'.demo',
     data:{
         msg:'hello',
         flag:true
     },
     methods: {
         btnb: function () {
             this.msg = this.msgs
           if(this.flag){
                 this.msgs='hello vue'
                  this.flag=false
             }else{
               this.msgs='hello word'
               this.flag=true
           }
         }

    }
 })
</script>

3.v-bind：绑定属性

格式：v-bind:属性名=“函数名” （简写：:属性名=“函数名”）

<div class="demo">
    <p v-on:click='btnp'><img v-bind:src="url" alt=""></p>
</div>
<script src="vue/dist/vue.js"></script>
<script>
    new Vue({
        el:'.demo',
        data:{
            url:'images/1.jpg',
            flag:true,
        },
        methods: {
            btnp: function () {
                this.url = this.flag
                if(this.flag){
                    this.url='images/2.jpg'
                    this.flag=false
                }else{
                    this.url='images/1.jpg'
                    this.flag=true
                }
            }

        }
    })
</script>

4.v-show 控制元素的隐藏和显示

格式：v-bind=" "

<div class="demo">
    <h1>{{msgs}}</h1>
    <h3 v-show='!alt'>{{msgs}}</h3>
</div>
<script src="vue/dist/vue.js"></script>
<script>
    new Vue({
        el:'.demo',
        data:{
            msgs:'oooo',
            alt:true
        }
    })
</script>

注：使用display：none隐藏

5.v-if、v-else、v-else-if

<div class="demo">
    <div v-if='num==0'>00000000000</div>
    <div v-else-if='num==1'>1111111111</div>
    <div v-else-if='num==2'>22222222</div>
    <div v-else='num==5'>555555555555</div>

</div>

<script src="vue/dist/vue.js"></script>
<script>
    new Vue({
        el:'.demo',
        data:{
            num:Math.floor(Math.random()*(5-0+1)+0)
        }
    })
</script>