记录一下添加和修改样式的方法。
样式的实现是通过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>
