版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/soulwyb/article/details/86476531
通过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'}]"