2018-09-14 Vue的指令（下）

作者: Alive_92dc | 来源:发表于2018-09-14 08:34 被阅读0次

Vue-02-xiaoming
2018-09-14 Vue的指令（下）
Vue-02：
2018-09-14 vue常用指令
vue入门6---vue基本指令、自定义指令、插件
Vue指令钩子函数
40.Vue自定义指令--局部
Vue div节点滚动事件-加载更多
Vue 成长之旅 | Vue基础用法一
vue自定义指令

1.vue的指令

v-for="     v-model="  v-on:click="    v-show/v-if=“”    v-bind:属性名=“”
v-else="   v-else-if="

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

 <div class="itany">
       <input type="text" v-model="mes">
       <p>{{mes}}</p>
       <button v-on:click="ait">按钮</button>
   </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:".itany",
            data:{
                mes:"hello vue"
            },
            methods:{
                ait:function(){
                    alert("hello vue")
//                    console.log(this.mes) 
                }
            }
        })
    </script>

3.v-bind:绑定属性

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

3.v-on:绑定事件

 <div id='itany'>
       <button v-on:click='alt'>按钮</button>
   </div>
    <script src='js/vue.js'></script>
    <script>
      var vm=new Vue({
            el:'#itany',
            data:{
                msg:'hello'
            },
            methods:{
                alt:function(){
//                    alert(000)
//                    console.log(this.msg);
                    console.log(vm.msg);
                }
            }
        })
    
    </script>

4.v-show:控制元素的显示隐藏：使用display:none

<div class="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 world",
                    see:false
                }
            })
        </script>

5.v-if,v-else,v-else-if

<body>
        <div class="itany">
            <p v-if="num==1">11111</p>
            <p v-else-if="num==2">22222</p>
            <p v-else-if="num==3">33333</p>
            <p v-else-if="num==4">44444</p>
            <p v-else="num==5">55555</p>
        </div>
        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:".itany",
                data:{
                    num:Math.floor(Math.random()*(5-0+1)+0)
                }
            })
        </script>
    </body>

实例-添加删除

<body>
   <div id='itany'>
       <input type="text" v-model='txt'>  <button v-on:click='add'>添加</button>
       <ul>
           <li v-for="(value,index) in arr">
              {{value}}
              <button v-on:click='delt(index)'>删除</button>
           </li>
       </ul>
   </div>
    <script src='js/vue.js'></script>
    <script>
    
       new Vue({
           el:'#itany',
           data:{
               arr:['吃饭','睡觉','打游戏'],
               txt:''
           },
           methods:{
               add:function(){
                   this.arr.push(this.txt),
                    this.txt=''
               },
               delt:function(ind){
                   this.arr.splice(ind,1)
               }
           }
       })
    </script>
</body>

实例-按钮切换

<body>
   <div class="itany">
       <p>{{msg}}</p>
       <button v-on:click="alt">按钮</button>
   </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:".itany",
            data:{
              msg:"hello world",
              flag:true,
            },
            methods:{
            alt:function(){
               if(this.flag==true){
                   this.msg="hello vue",
                   this.flag=false
               }else{
                    this.msg="hello world",
                    this.flag=true
               }
            }
        }
        }) 
    </script>
</body>

实例-显示隐藏

<body>
        <div class="itany">
            <button v-on:click="out">点击隐藏</button>
            <div class="box" v-show="see"></div>
        </div>
        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:".itany",
                data:{
                    see:true
                },
                methods:{
                    out:function(){
//                if (this.see==true) {
//                  this.see=false
//                } else{
//                  this.see=true
//                }
                  this.see=!this.see
                }
              }
            })
        </script>
    </body>