combox绑定值以后再赋值给text_VUE操作class\style\绑定属性\绑定事件\事件修饰符

我们现在想要操作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:"这是一段数字", 
	    },
   })

说到这们这里，我们转尔一想，如果在写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");
	   } 
	}
 })

键盘码参考文章
详细参考文章：keycode键盘 按键 - 键码 对应表

鼠标修饰符

.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事件。

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