1.使用v-bind绑定style
<h2 :style="{css属性名:值}">{{message}}</h2>
<body>
<div id="app">
<!-- <h2 :style="{css属性名:值}">{{message}}</h2> -->
<!-- <h2 :style="{fontSize:size}">{{message}}</h2> -->
<h2 :style="{fontSize:size + 'px',color:fineColor}">{{message}}</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好",
size: 500,
fineColor: 'red'
}
})
</script>
</body>
2.v-bind和v-for联合使用
- 实现一个列表,点击相应list改变颜色
思路:
- 使用v-for将数据循环出列表 。v-for="(items,index) in message" 。items,index有用
- 绑定样式。:class="{active:currentIndex === index}",默认currentIndex: 0 ,即index=0默认选中颜色。
- 点击list改变颜色。@click="colorred(index)" 点击事件绑定一个函数 colorred: function(index) {
this.currentIndex = index
}
css样式
.active {
color: aqua;
}
<body>
<div id="app">
<ul>
<li v-for="(items,index) in message" :class="{active:currentIndex === index}" @click="colorred(index)">
{{items}}
</li>
</ul>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: ['海贼王', '火影忍者', '死神', '进击的巨人'],
currentIndex: 0 //记录由谁来显示颜色
},
methods: {
colorred: function(index) {
this.currentIndex = index
}
}
})
</script>
</body>