Vue.js 动态绑定类名实现选中变红效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js 动态绑定类名实现选中变红效果</title>
<style>
.active {
color: red
}
</style>
</head>
<body>
<div id="div1">
<div v-for="(item, index) in data">
<li :class="{active: item.flag}">
<input type="checkbox" v-model="item.flag">
{{item.price}}
</li>
</div>
</div>
<!-- 用动态绑定class 完成 当选中后 该条数据变成红色字体黑点变红点 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#div1',
data: [{
id: 100,
flag: false,
price: 199
}, {
id: 101,
flag: false,
price: 34
}, {
id: 102,
flag: false,
price: 25.4
}, {
id: 103,
flag: false,
price: 100
}],
methods: {
fn() {
for (let i = 0; i < this.data.length; i++) {
console.log(this.data);
}
}
}
})
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/nyAE 著作权归作者所有。请勿转载和采集!