Vue.js 樣式系結
Vue.js v-bind 在處理 class 和 style 時， 專門增強了它，運算式的結果型別除了字串之外，還可以是物件或陣列，
可以為 v-bind:class 設定一個物件，從而動態的切換 class:
<template> <div id="app"> <p v-bind:class="{active:isActive}">this is a text</p> </div> </template> <script> var count=1; export default { name: 'App', data(){ return{ isActive:true } }, } </script> <style scoped> .active{ color:pink; } </style>
可以在物件中傳入更多屬性用來動態切換多個 class ，
<template> <div id="app"> <p v-bind:class="{active:isActive,'light-bg':lightBg}">this is a text</p> </div> </template> <script> var count=1; export default { name: 'App', data(){ return{ isActive:true, lightBg:true } }, } </script> <style scoped> .active{ color:pink; } .light-bg{ background:lightgreen; } </style>
也可以直接系結資料里的一個物件：
<template> <div id="app"> <p v-bind:class="classObj">this is a text</p> </div> </template> <script> var count=1; export default { name: 'App', data(){ return{ classObj:{ active:true, 'light-bg':true } } }, } </script> <style scoped> .active{ color:pink; } .light-bg{ background:lightgreen; } </style>
可以把一個陣列傳給 v-bind:class ，實體如下：
<template> <div id="app"> <p v-bind:class="[activeCls,bgCls]">this is a text</p> </div> </template> <script> var count=1; export default { name: 'App', data(){ return{ activeCls:'active', bgCls:'light-bg' } }, } </script> <style scoped> .active{ color:pink; } .light-bg{ background:lightgreen; } </style>
可以使用三元運算式來切換串列中的 class ：
<template> <div id="app"> <p v-bind:class="isActive?'active':''">this is a text</p> </div> </template> <script> var count=1; export default { name: 'App', data(){ return{ isActive:true } }, } </script> <style scoped> .active{ color:pink; } .light-bg{ background:lightgreen; } </style>
可以在 v-bind:style 直接設定樣式：
<template> <div id="app"> <p v-bind:style="{color:mycolor,fontSize:myfontSize+'px'}">this is a text</p> </div> </template> <script> var count=1; export default { name: 'App', data(){ return{ mycolor:'orange', myfontSize:14 } }, } </script> <style scoped> .active{ color:pink; } .light-bg{ background:lightgreen; } </style>
也可以直接系結到一個樣式物件，讓模板更清晰：
<template> <div id="app"> <p v-bind:style="classObj">this is a text</p> </div> </template> <script> var count=1; export default { name: 'App', data(){ return{ classObj:{ color:'lightblue', fontSize:'16px' } } }, } </script> <style scoped> .active{ color:pink; } .light-bg{ background:lightgreen; } </style>
v-bind:style 可以使用陣列將多個樣式物件應用到一個元素上：
注意：當 v-bind:style 使用需要特定前綴的 CSS 屬性時，如 transform ，Vue.js 會自動偵測并添加相應的前綴，
- 1:v-bind動態系結指令，默認情況下標簽自帶屬性的值是固定的，在為了能夠動態的給這些屬性添加值，可以使用v-bind:你要動態變化的值="運算式"
- 2:v-bind用于系結屬性和資料 ，其縮寫為“ : ” 也就是v-bind:id === :id
- 3:v-model用在表單控制元件上的，用于實作雙向資料系結，所以如果你用在除了表單控制元件以外的標簽是沒有任何效果的，
動態調節樣式
<template> <div id="app"> <button v-on:click="fontSize--">small</button> <button v-on:click="fontSize++">big</button> <p :style="{color:color,fontSize:fontSize+'px'}">this is a text</p> </div> </template> <script> var count=1; export default { name: 'App', data(){ return{ fontSize:16, color:'orange' } }, } </script> <style scoped> .active{ color:pink; } .light-bg{ background:lightgreen; } </style>
動態調節需要注意，以下兩種情況：
<template> <div id="app"> <button v-on:click="fontSize--">small</button> <button v-on:click="fontSize++">big</button> <!-- 可以動態調節 --> <p :style="{color:color,fontSize:fontSize+'px'}">this is a text can change</p> <!-- 不可以動態調節 --> <p :style="objectStyle">this is a text cannot change</p> </div> </template> <script> var count=1; export default { name: 'App', data(){ return{ fontSize:16, color:'orange', objectStyle:{ fontSize:this.fontSize+'px', color:this.color, } } }, } </script> <style scoped> .active{ color:pink; } .light-bg{ background:lightgreen; } </style>
正確的打開方式：動態調節需要注意在 data 里面呼叫 data 的資料是 undefined 的，正確的使用方法是使用 computed，（使用 methods 回傳無效，可能是不支持這樣的設定）
<template> <div id="app"> <button v-on:click="fontSize--">small</button> <button v-on:click="fontSize++">big</button> <!-- 可以動態調節 --> <p :style="{color:color,fontSize:fontSize+'px'}">this is a text can change</p> <!-- 不可以動態調節 --> <p :style="objectStyle">this is a text cannot change</p> <!-- 可以動態調節 --> <p :style="methodsStyle()">this is a text can change</p> <!-- 可以動態調節 --> <p :style="computedStyle">this is a text can change</p> </div> </template> <script> var count=1; export default { name: 'App', data(){ return{ fontSize:16, color:'orange', objectStyle:{ fontSize:this.fontSize+'px', color:this.color, }, } }, methods:{ methodsStyle(){ return {fontSize:this.fontSize+'px',color:this.color}; } }, computed:{ computedStyle(){ return {fontSize:this.fontSize+'px',color:this.color}; } }, } </script> <style scoped> .active{ color:pink; } .light-bg{ background:lightgreen; } </style>
加一個 watch 方法，objectStyle 的方式也能實作動態變化，
<template> <div id="app"> <button v-on:click="fontSize--">small</button> <button v-on:click="fontSize++">big</button> <!-- 可以動態調節 --> <p :style="{color:color,fontSize:fontSize+'px'}">this is a text can change</p> <!-- 不可以動態調節 --> <p :style="objectStyle">this is a text cannot change</p> <!-- 可以動態調節 --> <p :style="methodsStyle()">this is a text can change</p> <!-- 可以動態調節 --> <p :style="computedStyle">this is a text can change</p> </div> </template> <script> var count=1; export default { name: 'App', data(){ return{ fontSize:16, color:'orange', objectStyle:{ fontSize:this.fontSize+'px', color:this.color, }, } }, methods:{ methodsStyle(){ return {fontSize:this.fontSize+'px',color:this.color}; } }, computed:{ computedStyle(){ return {fontSize:this.fontSize+'px',color:this.color}; } }, watch:{ fontSize(fontSize){ this.objectStyle.fontSize=fontSize+'px'; } } } </script> <style scoped> .active{ color:pink; } .light-bg{ background:lightgreen; } </style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/115148.html
標籤：JavaScript
下一篇：Vue.js 事件處理器+表單