Vue.js 动态绑定 class 实现价格大于 100 加中划线
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Vue.js 动态绑定 class 实现价格大于 100 加中划线</title>
<style>
.active {
text-decoration: line-through;
}
</style>
</head>
<body>
<!-- 用动态绑定class 完成 当价格大于100 这个数字加上一个中划线 -->
<div id='div1'>
<div v-for='(item, index) in shop'>
<li :class='{active: item.price > 100}'>
{{item.price}}
</li>
</div>
</div>
<script src='vue.js'></script>
<script>
new Vue({
el: '#div1',
data: {
shop: [{
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
}]
},
<pre><code> })
</script>
</body>
</code></pre>
</html>
原文地址: https://www.cveoy.top/t/topic/nyDh 著作权归作者所有。请勿转载和采集!