<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自學(xué)vue：v-bind:style的用法</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 對(duì)象寫(xiě)法 -->
<h3 v-bind:style = "{color:'red'}">{{message}}</h3>
<!-- 數(shù)組寫(xiě)法 -->
<!-- 值得注意的是數(shù)組寫(xiě)法是寫(xiě)入一個(gè)變量，變量在data處用對(duì)象類(lèi)型重新補(bǔ)入 -->
<h3 v-bind:style = "[color,background]">{{message}}</h3>
</div>
</body>
<script type="text/javascript">
//v-bind:style 用于動(dòng)態(tài)綁定樣式
//v-bind:style 有兩種寫(xiě)法寫(xiě)入樣式，別分是對(duì)象寫(xiě)法，數(shù)組寫(xiě)法
//對(duì)象寫(xiě)法如: v-bind:style = “color:’red’” 值得注意的是，這里的第一層引號(hào)是使用雙引號(hào)
//數(shù)組寫(xiě)法如: v-bind:style = [var,var],所添加數(shù)組內(nèi)的變量，需要在data內(nèi)重新賦值為對(duì)象類(lèi)型
let app = new Vue({
el:’#app’,
data:{
message:’v-bind:style’,
color:{color:’red’},
background:{background:’blue’}
}
})
</script>
</html>
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)
收藏
