这是一个关于Vue.js组件和事件处理的示例。利用`v-for`指令遍历`name`数组并展示元素，点击事件`activeClick`用于切换选中状态，更新`namber`显示大写文字，`nameInfo`显示单字，并通过`isActive`控制高亮显示。代码中使用了`<van-icon>`组件来展示选中标记。
<div class="word" :class="{'bright':index == isActive}" v-for="(item,index) in name"
@click="activeClick(item,index)">
<img src="./images/triangle.png" class="triangle">
<span>{{item}}</span>
<van-icon name="checked" class="vanIcon" color="#3CB371" size="20" />
</div>js
data: {
namber: '一',
nameInfo: '',
isActive: 0, //默认为0，即显示
},
activeClick(res, req) {
const changeNum = ['一', '二', '三', '四', '五', '六', '七', '八', '九'];
_this.namber = changeNum[req];//显示大写文字
_this.nameInfo = res;//显示单字
_this.isActive = req;//控制高亮显示
},
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
