Vue学习笔记绑定样式的4种方法

朴灿烈づ我的快乐病毒、 2022-04-22 15:54 128阅读 0赞

通过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'}]"