Vue实现对点击的列表<li>添加class样例

实现思路:

设置一个变量 type,然后写成:class="{active:index === type}",然后click的时候,传入index,把type变量的值赋值为index;这样this.type=index,index==‘index’ 返回true,所以class样例生效

	<ul>
       <li  v-for="(item,index) in params" @click="meClick(index)" :class="{active:index === type}" >{
  {item}}</li
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以将上述代码改成一个Vue组件,代码如下: ``` <template> <div class="shortcut"> <div class="w"> <div class="fl"> <ul> <li>{{ welcome }}</li> <li> <a href="#">{{ login }}</a> <a href="#" class="style-red">{{ register }}</a> </li> </ul> </div> <div class="fr"> <ul> <li><a href="#">{{ myOrder }}</a></li> <li class="spacer"></li> <li> <a href="#">{{ myShopping }}</a> <i class="icomoon"></i> </li> <li class="spacer"></li> <li><a href="#">{{ mallMember }}</a></li> <li class="spacer"></li> <li><a href="#">{{ corporatePurchase }}</a></li> <li class="spacer"></li> <li><a href="#">{{ followMall }}</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">{{ customerService }}</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">{{ siteNavigation }}</a> <i class="icomoon"></i></li> </ul> </div> </div> </div> </template> <script> export default { data() { return { welcome: '购物商城欢迎您!', login: '请登录', register: '免费注册', myOrder: '我的订单', myShopping: '我的购物', mallMember: '商城会员', corporatePurchase: '企业采购', followMall: '关注商城', customerService: '客户服务', siteNavigation: '网站导航', }; }, }; </script> ``` 在这个组件中,我们将所有的文本数据都统一放在了`data`中,并且通过双花括号语法将其渲染到模板中。这样做的好处是,我们可以更方便地统一管理数据,同时也可以更容易地进行国际化处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值