當前位置：首頁 > 前端技术 > vue >内容正文

vue

007_Vue style样式绑定

發布時間：2025/5/22 vue 59 豆豆

生活随笔收集整理的這篇文章主要介紹了 007_Vue style样式绑定小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. style樣式綁定處理

1.1. 對象語法

1.2. 數組語法

2. 對象綁定style

2.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>對象綁定style</title></head><body><div id="app"><div><span v-bind:style="{border: borderStyle, width: widthStyle, height: heightStyle, display: displayStyle}">對象綁定style</span><br /><button @click="handle1">切換樣式</button></div><br /><div><span v-bind:style="objStyle">對象綁定style簡化</span><br /><button @click="handle2">切換樣式</button></div></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var vm = new Vue({el: "#app",data: {borderStyle: "solid 1px",widthStyle: "400px",heightStyle: "50px",displayStyle: "block",objStyle: {border: "solid 1px", width: "400px", height: "50px", display: "block"}},methods: {handle1: function(event) {this.widthStyle = "200px";},handle2: function(event) {this.objStyle.width = "200px";}}});</script></body> </html>

2.2. 效果圖

2.3. 點擊2個切換樣式按鈕后?

3. 數組綁定style

3.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>數組綁定style</title></head><body><div id="app"><div><span v-bind:style="[{border: borderStyle, width: widthStyle, height: heightStyle, display: displayStyle}, {color: colorStyle}]">數組綁定style</span><br /><button @click="handle1">切換樣式</button></div><br /><div><span v-bind:style="arrStyle">數組綁定style簡化</span><br /><button @click="handle2">切換樣式</button></div></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var vm = new Vue({el: "#app",data: {borderStyle: "solid 1px",widthStyle: "400px",heightStyle: "50px",displayStyle: "block",colorStyle: "red",arrStyle: [{border: "solid 1px", width: "400px", height: "50px", display: "block"}, {color: "red"}]},methods: {handle1: function(event) {this.widthStyle = "200px";},handle2: function(event) {this.arrStyle[0].width = "200px";}}});</script></body> </html>

3.2. 效果圖

3.3. 點擊2個切換樣式按鈕后 ?

總結

以上是生活随笔為你收集整理的007_Vue style样式绑定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。