Vue 屬性與樣式
阿新 • • 發佈：2020-11-20
屬性繫結
v-bind
如果想要操縱被掛載標籤的屬性，則使用v-bind進行屬性繫結，當然也可以進行簡寫，簡寫形式為:。
需要注意的有以下兩點：
- 如果包裹屬性的是雙引號，它將訪問Vue例項嘗試獲取該屬性
- 如果包裹屬性的是單引號外層再包裹上雙引號，則代表這就是一個普通的字串
單純雙引號，將會訪問Vue例項嘗試獲取該變數：
<!-- 結果:<p s1="yunya">屬性繫結</p> --> <!-- 結果:<p s1="attr">屬性繫結</p> --> <body> <div id="app"> <p :s1="attr">屬性繫結</p> </div> <script src="./vue.js"></script> <script> const app = new Vue({ el: "#app", data: { attr: "yunya", } }) </script> </body>
如果新增單引號，則會被當作普通字串：
<!-- 結果:<p s1="attr">屬性繫結</p> --> <body> <div id="app"> <p :s1="'attr'">屬性繫結</p> </div> <script src="./vue.js"></script> <script> const app = new Vue({ el: "#app", data: { attr: "yunya", } }) </script> </body>
樣式操作
class物件繫結
使用class屬性操縱樣式是一種非常常見的操作。
物件形式進行繫結時，當為false則代表不應用該屬性，反之亦然。
除此之外，還可以使用正常的class=類名來定製不變的類。
<style> .italic { font-style: italic; } .red { color: red; } .show{ display: unset; } </style> <body> <div id="app"> <p :class="{italic:status,red:status}" class="show">屬性繫結</p> </div> <script src="./vue.js"></script> <script> const app = new Vue({ el: "#app", data: { status: true, } }) </script> </body>
class陣列繫結
除開使用物件形式為class屬性賦予多個值外，也可以使用陣列形式。
但是使用場景一般較少，語法格式如下：
<p :class=[變數1,變數2,"字串3"]>內容</p>
<!-- 注意，當陣列內的元素沒有加引號是會認為是一個變數，會去Vue例項中尋找 -->
<!-- 如果陣列內的元素加上引號，則被認位是一個字串 -->
<style>
.italic {
font-style: italic;
}
.red {
color: red;
}
.show{
display: unset;
}
</style>
<body>
<div id="app">
<p :class=[s1,s2,'show']>屬性繫結</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
s1: "italic",
s2: "red",
}
})
</script>
</body>
style物件繫結
我們可以通過v-bind與物件，動態繫結標籤的style屬性。
它有兩種書寫style的方式，一種是駝峰式，一種是通過-來進行連結。
注意它的格式是這樣的：
<p :style={color:"red",fontSize:"12px",backgroundColor:bgColor}>內容</p>
<!-- 注意!最後的background沒有新增單引號，這使得bgColor會當作變數去Vue例項中獲取 -->
示例如下：
<body>
<div id="app">
<p :style={fontStyle:"italic",color:"red",display:status}>屬性繫結</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
status:"unset",
}
})
</script>
</body>
最終結果：
element.style {
font-style: italic;
color: red;
display: unset;
}
style陣列繫結
除開可以使用物件語法繫結style屬性，也可以通過陣列語法進行繫結。
陣列中的元素必需是能夠從Vue例項中獲取到的資料。
<body>
<div id="app">
<p :style=[fontStyle,ColorStyle]>屬性繫結</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
fontStyle: {"font-size": "24px", "font-style": "italic"},
ColorStyle: {"color": "red", "background-color": "green"},
}
})
</script>
</body>
最終結果：
element.style {
font-size: 24px;
font-style: italic;
color: red;
background-color: green;
}