vue 单选列表改变样式

最新推荐文章于 2025-06-03 17:06:43 发布

sanly_shi

最新推荐文章于 2025-06-03 17:06:43 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_36774307/article/details/83621476

vue 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍Vue中循环模板的使用方法，包括列表循环、样式绑定及事件监听的简写方式。通过具体示例，如点击事件的处理和单选样式的实现，帮助读者掌握Vue的动态数据绑定和交互操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

循环模板：
<ul v-for="(item,index) in List">
   <li :class="{active:(clickIndex == index )}"></li>
</ul>

初始化：clickIndex: -1

点击方法：ling(index) {
    this.clickIndex = index
}

单选的样式：
.active{
   color:red
}




html属性  v-bind绑定 简写  :class
html事件/监听  v-on绑定  简写 @click
包括click dbclick等等

自定义的方法@selfconfig
从子组件监听的方法，自动按顺序获取参数