007_Vue style样式绑定
生活随笔
收集整理的這篇文章主要介紹了
007_Vue style样式绑定
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1. style樣式綁定處理
1.1. 對象語法
<div v-bind:style="{width: '400px', height: '50px'}"></div>1.2. 數(shù)組語法
<div v-bind:style="[{width: 400px'}, {height: '50px'}]"></div>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. 數(shù)組綁定style
3.1. 代碼
?
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>數(shù)組綁定style</title></head><body><div id="app"><div><span v-bind:style="[{border: borderStyle, width: widthStyle, height: heightStyle, display: displayStyle}, {color: colorStyle}]">數(shù)組綁定style</span><br /><button @click="handle1">切換樣式</button></div><br /><div><span v-bind:style="arrStyle">數(shù)組綁定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样式绑定的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 009_Vue循环结构
- 下一篇： 002_Vue指令