版权声明:转载请注明出处 https://blog.csdn.net/SOALIN228/article/details/84745981
Class 与 Style 绑定
绑定 HTML Class
- 对象语法
对div中的 class 进行绑定后, activated 这个 class 存在与否将取决于数据属性 isActivated 的 truthiness,给div设置一个点击事件,控制 class 属性的显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的样式绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.activated {
color: red;
}
</style>
</head>
<body>
<div id="app">
<div @click="handleDivClick"
:class="{activated: isActivated}"
>hello world</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
isActivated: false
},
methods: {
handleDivClick: function() {
this.isActivated = !this.isActivated;
}
}
})
</script>
</body>
</html>
- 数组语法
我们可以把一个数组传给 v-bind:class,以应用一个 class 列表
...
<div id="app">
<div @click="handleDivClick"
:class="[activated, activatedOne]"
>hello world</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
activated: "",
activatedOne: "activated-one"
},
methods: {
handleDivClick: function() {
this.activated = this.activated === "activated" ? "" : "activated";
}
}
})
</script>
...
绑定内联样式
v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式或短横线分隔 (记得用单引号括起来) 来命名,经常使用三元表达式会使代码显得更优雅哦
...
<div id="app">
<!-- <div :style="styleObj" --> // 对象语法
<div :style="[styleObj, {fontSize: '20px'}]"
@click="handleDivClick">hello world</div> // 数组语法
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
styleObj: {
color: "black"
}
},
methods: {
handleDivClick: function() {
this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
}
}
})
</script>
...