class的数组绑定:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.activated {
color: red;
}
</style>
</head>
<body>
<div id="app">
<div @click="handleDivClick" :class="[activated]">hello world</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
activated: ''
},
methods: {
handleDivClick () {
this.activated = this.activated === 'activated' ? '' : 'activated'
}
}
})
</script>
</body>
</html>
class的对象绑定:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.activated {
color: red;
}
</style>
</head>
<body>
<div id="app">
<div @click="handleDivClick" :class="{activated: isActivated}">hello world</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isActivated: false
},
methods: {
handleDivClick () {
this.isActivated = !this.isActivated
}
}
})
</script>
</body>
</html>
style的对象绑定:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div :style="styleObj" @click="handleDivClick">hello world</div>
</div>
<script>
var app = new Vue({
el: '#app',
data () {
return {
styleObj: {
color: 'black'
}
}
},
methods: {
handleDivClick () {
this.styleObj.color = this.styleObj.color === 'black' ? 'red' : 'black'
}
}
})
</script>
</body>
</html>
style的数组语法绑定:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div :style="[styleObj, {fontSize: '20px'}]" @click="handleDivClick">hello world</div>
</div>
<script>
var app = new Vue({
el: '#app',
data () {
return {
styleObj: {
color: 'black'
}
}
},
methods: {
handleDivClick () {
this.styleObj.color = this.styleObj.color === 'black' ? 'red' : 'black'
}
}
})
</script>
</body>
</html>