Vue事件绑定(以代码的形式进行介绍)-CSDN博客

v-on指令: v-on：也可以简写为@:

<div id="app">
{{num}}
<button v-on:click="add()">num+1</button>
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
        num:1
    },
    methods:{
        add:function(){
        //this对应的是 Vue这个大的对象
        //data中的数据就是this的属性
            this.num++
        }
    }
})
</script>
复制代码

关于v-on:的一些事件处理:

<div id="app">
<p @click="fn1()">
<span @click.stop="fn2()">hello world</span>
</p>
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
        num:1
    },
    methods:{
        fn1:function(){
        console.log(1)
        },
        fn2:function(){
            console.log(2)
        }
        
    }
})
</script>
复制代码

v-text和v-html指令:

<div id="app">
    <p v-text="mes"></p>      //不解析标签，原样输出

    <p v-html="mes"></p>      //解析标签
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
      mes:"<a>hello world</a>"
    },
})
</script>
复制代码

v-bind:(绑定属性添加单个类名)

<style>
.classA{
    color:red;
}
.classB{
    font-size:50px;
}
</style>
<div id="app">
 <p v-bind:class="x">
    hello world
 </p>
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
     x:"classA",
    },
})
</script>
复制代码

v-bind:(添加多个类名)

<style>
.classA{
    color:red;
}
.classB{
    font-size:50px;
}
</style>
<div id="app">
 <p v-bind:class="[x,y]">
    hello world
 </p>
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
     x:"classA",
     y:"classB"
    },
})
</script>
复制代码

v-bind 动态控制单个类名的添加移除:

<style>
.classA{
    color:red;
}
.classB{
    font-size:50px;
}
</style>
<div id="app">
 <p v-bind:class="[{classA:i}]">
    hello world
 </p>
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
     i:true,
    },
})
</script>
复制代码

v-bind 动态控制多个类名的添加移除:

<style>
.classA{
    color:red;
}
.classB{
    font-size:50px;
}
</style>
<div id="app">
 <p v-bind:class="[{classA:i},{classB:i}]">
    hello world
 </p>
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
     i:true,
     t:true
    },
})
</script>
复制代码

v-bind 图片属性的绑定:

<div id="app">
 <img src="webUrl" alt="">
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
    webUrl:"图片路径"
    },
})
</script>
复制代码

v-bind style的绑定:

<div id="app">
<p :style="{color:x,fontSize:size+"px"}"></p>
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
   obj:{
       color:"red",
       fontSize:"40px"
   }
    },
    x:"green",
    size:20
})
</script>
复制代码

v-model: 双向数据绑定(经常用于表单元素的绑定)

<div id="app">
<input type="text" v-model="mes">
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
    mes:{
        hello world
    }
    },

})
</script>
复制代码

v-model用于复选框的案例

<div id="app">
<input type="checkbox" v-model="t">
<p  :class="[{x:t}]"></p>
{{mes}}
{{t}}
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
    mes:"hello world",
    t:rue,
    },

})
</script>
复制代码

v-if和x-show 根据变量来判断元素的显示隐藏

v-if:直接切换结构

<div id="app">
<button @click="chaange()">切换</button>
  <p v-if="t">hello world</p>
    <p v-else>你好世界</p>
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
        t:true      /根据t的真假来判断显示和隐藏
    },
    methods:{
        change:function(){
            this.t=!this.t
        }
    }

})
</script>
复制代码

v-show 通过display:none来切换显示隐藏没有v-else

<div id="app">
<button @click="chaange()">切换</button>
  <p v-show="t">hello world</p>
 
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
        t:true      /根据t的真假来判断显示和隐藏
    },
    methods:{
        change:function(){
            this.t=!this.t
        }
    }

})
</script>

v-if和v-show的对比：v-if初次加载时的性能更好；v-show切换时性能更好
复制代码

v-for：

<ul>
<li v:for="{item,index} in arr" :key="index">
{{index}}
{{item}}
</li>
</ul>
<script>
var vm=new Vue({
    el:"#app",
    data:{
      arr:["hello","NIHAO","你好",]
    }
   

})
</script>
复制代码