vue class、style样式绑定

最新推荐文章于 2025-10-12 22:42:15 发布

原创最新推荐文章于 2025-10-12 22:42:15 发布 · 327 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue样式绑定

vue 专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍了Vue.js中三种不同的样式绑定方法：class对象方式、class数组方式和内联style方式，包括如何通过数据变化动态改变元素样式。

class对象方式绑定

    <div id="app">
        <div @click="handleDivClick" :class="{activated: isActivated}">
            Hello world
        </div>
    </div>
    
    <script>
		var vm = new Vue({
			el: '#app',
			data:{
				isAcrivated: false
			},
			methods:{
				handleDivClick: function(){
					this.isActivated = !this.isActivated;
				}
			}
		});
	</script>

class数组方式绑定

    <div id="app">
        <div @click="handleDivClick" :class="[activated]">
            Hello world
        </div>
    </div>
	
	<script>
		var vm = new Vue({
			el: '#app',
			data:{
				activated: ""
			},
			methods:{
				handleDivClick: function(){
					this.activated = this.activated ==="activated" ? "" : "activated"
				}
			}
		});
	</script>

内联style方式绑定

    <div id="app">
        <div :style="styleObj" @click="handleDivClick">
            Hello world
        </div>
    </div>
	
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				styleObj:{
					clolor: 'black'
				}
			},
			methods:{
				handleDivClick: function(){
					this.styleObj.color = this.styleObj.color === "black" ? "red" : "black"
				}
			}
		});
	</script>

内联style引用数组形式绑定样式

    <div id="app">
        <div :style="[styleObj,{fontSize: '20px'}]" @click="handleDivClick">
            Hello world
        </div>
    </div>
	
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				styleObj: {
					color: "black"
				}
			},
			methods: {
				handleDivClick: function(){
					this.styleObj.color = this.styleObj.color === "black" ? "red" : "black"
				}
			}
		});
	</script>