vue09-class对象样式绑定
程序员文章站
2022-05-15 22:46:16
...
首先看代码
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8" />
<title>Hello world</title>
<script src="vue.js"></script>
<style>
.activated {
color: red;
}
</style>
</head>
<body>
<div id="root">
<!-- class对象绑定 -->
<div @click="handleDivClick" :class="{activated: isActivated}">HelloWorld</div>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
isActivated: false
},
methods: {
handleDivClick: function () {
this.isActivated = !this.isActivated;
}
}
})
</script>
</body>
</html>当isActivated属性为ture时，class与样式activated绑定，当为false时，不绑定。
click事件为切换绑定与不绑定
上一篇： 一字并肩王究竟是什么官职 为什么这两人得了封号后总是炫耀
下一篇： mybatis四种传参方式