通过Vue绑定样式来做到切换：
第一种
<!DOCTYPE html>
<head>
<title>样式自定义</title>
<script type="text/javascript" src="vue.js"></script>
<style>
.ChangeColor {
color: red;
}
</style>
</head>
<body>
<div id="app">
<div @click="handleChangeClick"
:class="{ChangeColor:isChangeColor}"
>
Hello World
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
isChangeColor: false
},
methods: {
handleChangeClick: function() {
this.isChangeColor = !this.isChangeColor
}
}
})
</script>
</html>第二种：
<!DOCTYPE html>
<head>
<title>样式自定义</title>
<script type="text/javascript" src="vue.js"></script>
<style>
.ChangeColor {
color: red;
}
</style>
</head>
<body>
<div id="app">
<div @click="handleChangeClick"
:class="[ChangeColor]"
>
Hello World
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
ChangeColor: ""
},
methods: {
handleChangeClick: function() {
this.ChangeColor = this.ChangeColor === "" ? "ChangeColor" : ""
}
}
})
</script>
</html>第三种：（不再是:class 而是: style）
<!DOCTYPE html>
<head>
<title>样式自定义</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<div @click="handleChangeClick"
:style="styleObj"
>
Hello World
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
styleObj: {
color: "black"
}
},
methods: {
handleChangeClick: function() {
this.styleObj.color = this.styleObj.color === "black" ? "red" : "black"
}
}
})
</script>
</html>第四种：
跟第三种基本一样只是这里改变了
:style="[styleObj]"
第二种（就是:class[]可以放多个元素）
:class="[ChangeColor, ChangeColor-one]"
#在data中添加相应变量：
data: {
ChangeColor: "",
ChangeColor-one: "abc"
}
#这里要注意 font-size不能在这么写 跟这个一样格式的样式都必须去掉中间‘-’ 然后第二个单词首字母大写
:style="[styleObj, {fontSize: '3opx'}]"
2357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
