标签:style spl line css 技术 efault splay hang ble
样式图:
html:
<div :key="index" v-for="(item, index) in standing" class="Category"> <label class="Planning" v-bind:class="{ updata_clable: IsIndex === index }" @click="change(index)" >{{ item.name }}</label > </div>
js:
<script> export default { data() { return { standing: [ { name: "李现" }, { name: "邓伦" }, { name: "王俊凯" }, { name: "千玺" } ], IsIndex: 0 }; }, methods: { change: function(index) { this.IsIndex = index; } } }; </script>
css:
.Planning { font-size: 14px; font-family: DengXian; font-weight: bold; line-height: 14px; color: rgba(112, 112, 112, 1); opacity: 1; display: block; text-align: center; } .Category { width: 100%; height: 40px; margin-top: 10px; } .updata_clable { color: #19874f; }
v-bind就是用于绑定数据和元素属性的
标签:style spl line css 技术 efault splay hang ble
原文地址:https://www.cnblogs.com/lovebear123/p/12132898.html