vue裡的樣式新增之行間樣式
阿新 • • 發佈：2018-12-23
一：行間樣式 ：和繫結其他dom的屬性一樣， v-bind:style=
<div v-bind:style={backgroundColor: color}>2</div> //color是data或者computed的k； <div v-bind:style= 'style1'>1<div> //整個style1是data的k或者computed的k<div v-bind:style=
div { height: 100px; width: 100px; } </style> </head> <body> <div id="app"> <div v-bind:style='style1'>1<div> <div v-bind:style='[style1,{backgroundColor:"blue",width:"200px"},style2]'>aaa</div> <div v-bind:style='demostyle'></div> <button v-on:click='changeColor'>click</button> </div> <script> varvm = new Vue({ el: '#app', data: { color: 'red', style2: { fontSize: '30px', fontWeight: 'bolder' } }, computed: {//利用computed來獲得，這厲害了，不但可以獲取到值（computed的k和data裡的k用法一樣），//而且節省了效能,一旦相關值變化，computed裡的k會重新計算返回新的值 style1: function () { return { height: '100px', width: '100px', backgroundColor: this.color //這一句如果在data裡是獲取不到this.color的 } } }, methods: { changeColor: function () { this.color = this.color == 'red' ? 'yellow' : 'red'; } } }) </script>