1、class的对象绑定
//对应的css
<style>
.active {
color: red;
}
</style> <!--html 对应的代码-->
<div class="container" id="mytest">
<div class="jumbotron">
<!--注意:如果需要添加其他静态的class,那么只要在名称上加上引号即可,否则视为变量处理-->
<div :class="{active:isactive,take:'take'}" @click="change">are you ok???</div>
</div>
</div> //javascript对应的代码
let VM = new Vue({
el: '#mytest',
//对应:class里的值
data: {isactive: false},
methods: {
change() {
this.isactive = !this.isactive;
}
}
})
2、class的数组绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
<style>
.active {
color: red;
}
</style>
<script src="./lib/vue.js"></script>
<script>
window.onload = function () {
let VM = new Vue({
el: '#mytest',
//对应:class里的值
data: {active: ''},
methods: {
change() {
this.active = this.active == '' ? 'active' : ''
}
}
})
}
</script>
</head>
<body>
<div class="container" id="mytest">
<div class="jumbotron">
<!--注意:如果需要添加其他静态的class,那么只要在名称上加上引号即可,否则视为变量处理如下面的类test-->
<div :class="[active,'test']" @click="change">are you ok???</div>
</div>
</div>
</body>
</html>
3、style的对象绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
<style>
.active {
color: red;
}
</style>
<script src="./lib/vue.js"></script>
<script>
window.onload = function () {
let VM = new Vue({
el: '#mytest',
data: {
activeObj: {
color: 'black',
'font-size': '20px'
}
},
methods: {
change() {
this.activeObj.color = this.activeObj.color == 'black' ? 'red' : 'black';
}
}
})
}
</script>
</head>
<body>
<div class="container" id="mytest">
<div class="jumbotron">
<!--用style的对象来绑定样式-->
<div :style="activeObj" @click="change">are you ok???</div>
</div>
</div>
</body>
</html>
4、style的数组绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
<style>
.active {
color: red;
}
</style>
<script src="./lib/vue.js"></script>
<script>
window.onload = function () {
let VM = new Vue({
el: '#mytest',
data: {
activeObj: {
color: 'black',
'font-size': '20px'
},
testObj:{
'text-decoration':'underline'
}
},
methods: {
change() {
this.activeObj.color = this.activeObj.color == 'black' ? 'red' : 'black';
}
}
})
}
</script>
</head>
<body>
<div class="container" id="mytest">
<div class="jumbotron">
<!--用style的数组可以容纳多个对象,可以是vue里data的数据,也可以是行内数据,注意引号-->
<div :style="[activeObj,testObj,{'font-weight':'bold'}]" @click="change">are you ok???</div>
</div>
</div>
</body>
</html>
5、通过委托事件绑定实现
通过methods里的方法,第一个传值是event,那么通过event.target 或者 event.currentTarget来操作DOM实现类的切换,可结合jquery