VUE操作class\style\绑定属性\绑定事件\事件修饰符

soviya
2,270 阅读6分钟
       我们现在想要操作id、style。绑定DOM属性用v-bind（缩写符号为“:”）,绑定事件我们用v-on（缩写符号为“@”）。

那么vue如何绑定class？

    我们先来了解一下，class是dom的属性还是事件呢？显而易见，肯定是属性对吧。那么按照上面的介绍，我们选择用v-bind。那么我们如何去使用v-bind来进行控制class样式呢？
  一、首先我们来先来写样式

.static{
	color:red;
	font-size:28px;
	}
.active{
	font-weight:600
	}
二、再来写HTML

<div id="app" v-bind:class="{static:static, active:active}">
      {{msg}}	
</div>
三、最后来看js

var app=new Vue({
	el:"#app",
	data:{
	    static:true,
	    active:false,
            msg:"这是一段数字"
	 }
    })
我们来再看页面输出，我们就会得一个颜色为红色大小为28px的一段文字。那么字体粗体为什么加载不上去呢？因为我们把控制字体active设置fasle,所以这个样式没有。


active:active这两个值我故意写成一样，那么这两个值分别代表什么呢？
解：

第一个值是样式名称。

第二个是data里面的变量，这个变量值有true和false,通过true和false来对样式进行是否展示。注意，true和false千万不能加引号，在之前刚开始我加了引号发现变量值为false都加载上去了，原因是什么呢？这里可以可以去了解什么情况下布尔值为true,什么情况为false.


问：如果我用v-bind是不是就是不能用class进行控制样式呢？


答：当然是可以的，这两者并不相冲突。
写到这里，我们是不是会联想到一个问题，就是如果样式名过多的情况下，是不是我们要意味着要写一大串这种，是不是非常感觉到头疼，别慌，这里vue开发者早就替我们想到了，我们可以用对象来进行控制。
Html内容

<div id="app" v-bind:class="styleObject"> 
 	{{msg}}
</div>
Js内容

var app=new Vue({
		el:"#app",
		data:{
		    styleObject:{
		        static1:false,
		        active:true
		      },
		    msg:"这是一段数字"
		    }
		})
这段我们得到加出来的样式就是active，static并没有加载上去。到这里我们还发现了一个问题，感觉html还是有点长，怎么办？上面是我们是不是有提到过v-bind缩小符为“：”
所以html是以下

<div id="app" :class="styleObject">
  	{{msg}}
</div>
到这里我们发现是不是简洁了许多？很赞对不对？
除了我们用对象方法来进行改变样式，用数组的方法可以吗？答案当然是可以的。方法如下
Html

<div id="app" :class="[active,static]"> 
 	{{msg}}
</div>
Js

var app=new Vue({
		el:"#app",
		data:{
		    static:"static",
		    active:"active",
		    msg:"这是一段数字"
		}			
            })
这里要注意数组与上面对象方法上的区别。

style行内样式来控制样式

上面我们主要讲了通过class来进行控制样式，那么我们如何能过style行内样式来控制样式呢？
主要有两种方式，和class差不多，一个是对象，别外一个数组。
第一个我们来说，对象的方法。
Html

<div id="app" :style="{color:activeColor,fontSize:fontSize+'px',backgroundColor:bgcolor}">
  	{{msg}}
</div>
Js

var app=new Vue({
		el:"#app",
		data:{	
		    activeColor:"blue",
		    fontSize:52,
		    bgcolor:"red",
		    msg:"这是一段数字",
		},
	    })
这里我们注意到为什么font-size和background-color要以fontSize和backgroundColor这种方式呢？
因为这是vue开发者规定，凡是以“-”都去除，第二单词首字母为大写。当然还有第二种方式就是加引号。例如'font-size':fontSize+'px'
我们一般以第一种方式为主。
道理同上，我们觉得冗余，看着不清爽，我们也可以用对象方式来做。
Html

<div id="app" :style="styleObJect">
      {{msg}}
</div>
Js

var app=new Vue({
	el:"#app",
	data:{	
	    styleObJect:{	
	        color:"red",
		fontSize:23+"px",
		backgroundColor:'pink'
	        },
	    msg:"这是一段数字",
	    },	
        })
第二种方式为数组方式
Html

<div id="app" :style="[style1,fontSize]"> 
 	{{msg}}
</div>
Js

var app=new Vue({
	    el:"#app",
	    data:{
		style1:{
		    color:'red'
	        },	
	        fontSize:{
		    fontSize:23+'px'
		},
		msg:"这是一段数字",
	    },			
    })
S说到这们这里，我们转尔一想，如果在写transform是不是加前缀，放心这里vue会自动帮我们添加，如果想自己弄的话，那么则加引号就行，比如['-webkit-box', '-ms-flexbox',]

我们如何去绑定事件呢

我们可以用v-on
Html

<div id="app" v-on:click="click1">  
	{{msg}}
</div>
Js

var app=new Vue({
	el:"#app",
	data:{	
	    msg:"这是一段数字",
	},
	methods:{
	    click1:function(){
	        alert("abc");
	    }
	}			
})
v-on可以用@符号来代替。

事件修符号

阻止单击事件继续传播   .Stop

<a @:click.stop="doThis"></a>
提交事件不再重载页面   .prevent

<form @:submit.prevent="onSubmit"></form>
添加事件监听器时使用事件捕获模式,即元素自身触发的事件先在此处理，然后才交由内部元素进行处理    .capture

<div @:click.capture="doThis">...</div>
只当在 event.target 是当前元素自身时触发处理函数,即事件不是从内部元素触发的     .self

<div v-on:click.self="doThat">...</div>
事件将只会触发一次     .once

<a v-on:click.once="doThis"></a>
滚动事件的默认行为 (即滚动行为) 将会立即触发, 而不会等待 `onScroll` 完成. 这其中包含 `event.preventDefault()` 的情况    .passive

<div v-on:scroll.passive="onScroll">...</div>

Vue还提供按键修饰符

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.spac
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
简单举一个键盘事件修饰的方法。
Html

<div id="app" @click="click1">
  	{{msg}}
  	<input type="text" @keyup.enter="click2"/>
</div>
Js

var app=new Vue({
	el:"#app",
	data:{
	    msg:"这是一段数字",
	},
	methods:{
	    click1:function(){
	        console.log("abc")
	    },	
	    click2:function(){
		alert("abc");	
	    }
	}
})

键盘码参考文章


鼠标修饰符

.left
.right
.middle
鼠标修饰符使用方法

<div id="app" @click.right="click1">
</div>
结尾我们来出一个题目，题目是，如果字体为粗体样式，点击该字体则去除粗体样式，反之亦然，如果字体没有粗体样式，增加粗体样式。这个题目，我们需要什么？一个v-bin控制样式，二个是v-on控制事件。一般来说，点击事件写在methods。当然事件不仅仅只有这一个，还有其它，下一篇再进行methods和computed等。
解：
Style

.static{
    color:red;
    font-size:28px;
}
.active{
    font-weight: 600;
}
Html

<div id="app" :class="{active:isTrue}" @click="change" class="static">
      {{msg}}
</div>
Js

var app=new Vue({
	    el:"#app",
	    data:{
	        isTrue:true,
	        msg:"这是一段数字",
            },
	    methods:{
		change(){
		    this.isTrue = !this.isTrue;
		    console.log("已点击")
		    console.log(app.isTrue)
		    }
	    }
        })

change函数里面的this.isTrue = !this.isTrue;主要来对这个样式赋值相反的active，如果isTrue为真，下次再点击的时候会对其值赋值为假。如果isTrue为假，下次再点击的时候会对其值赋值为真。


最后我们来复习一下，本篇讲的有哪些，分别是class、style样式。v-on事件的键盘修饰符、鼠标修饰符，当然还有是事件修饰符，比如click，鼠标离开，滑过等我不讲了，这里可以参考jquery事件。

下一篇讲的是：事件处理的两种方法（用法、区别）和表单输入绑定。


avatar
文章
阅读
粉丝