記錄一下添加和修改樣式的方法。
樣式的實現是通過class和style。動態添加修改這兩個標籤屬性即可。
直接上代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>利用vue實現樣式修改方法彙總</title>
</head>
<style>
.alternate
{
color: rgb(22, 233, 15);
}
.txt_color
{
background-color: rgb(88, 7, 20);
}
</style>
<script src="./js/vue.js"></script>
<body>
<div id="stylediv">
<p>class實現樣式修改=======================================</p>
<p :class="i%2?'alternate':''" v-for="i in 3" >{{i}} 直接設置樣式, 交替樣式,結合三元運算符。</p>
<!--數組的方式-->
<p :class="[alternatestr]" >class樣式對象方式。vue中的變量值</p>
<p :class="[i%2?'alternate':'',i%2?'txt_color':'']" v-for="i in 3" >{{i}} = 數組對象模式，結合三元運算符。（樣式名需要引號引起來）</p>
<p :class="arryObject" >class樣式。數組的形式["alternate","txt_color"]</p>
<!--對象方式-->
<p :class="{'alternate':isAlternate}" >class樣式對象方式。</p>
<p :class="{alternate}" >class樣式對象方式。</p>
<p :class="classObject" >class樣式。對象的形式{alternate:true,txt_color:true}</p>
<p :class="{alternate:i%2}" v-for="i in 3" >class樣式對象方式。(樣式名不需要引號引起來，值爲true使用) </p>
<p>style實現樣式修改=======================================</p>
<p v-bind:style="{ color: style_color, fontSize: style_fontsize + 'px' }">style 直接設置樣式</p>
<p v-bind:style="style_object">style 直接綁定到一個樣式對象</p>
<p :style="[style_object]">style 數組將多個樣式</p>
</div>
</body>
<script>
new Vue({
el:"#stylediv",
data:
{
arryObject:["alternate","txt_color"],
classObject:{alternate:true,txt_color:true},
alternate:true,
isAlternate:true,
alternatestr:"alternate",
style_color:"red",
style_fontsize: 10,
style_object:{color:"red",fontSize:"15px"},
}
})
</script>
</html>
