vue.js怎么动态设置css

问题描述

问 题

循环渲染了一个导航栏，怎么点击导航栏选项的时候，让这个选项的css发生变化
`

<ul class="navs"> <!-- 一级导航列表-->
            <li v-for="item in navitems" @click="showSubNav">
                <a href="#">{{item.gc_name}}</a>
            </li>
        </ul>

`

这个问题已被关闭，原因：问题质量差 - 问题太水、伸手党

解决方案

template

<ul>
   <li v-for="tab in tabs" :class="{ 'is-active': tab.isSelected}">
       <a :href="tab.href" @click="selectTab(tab)">{{tab.name}}</a>
   </li>
</ul>

script

selectTab(selectedTab) {
  this.tabs.forEach(tab => {
    tab.isSelected = (tab.name == selectedTab.name);
  })
}

给每个a标签绑定一个方法，并传入当前对象作为参数
当点击时遍历所有a标签，比较当前遍历对象的某个属性（例子中的name)与传入对象的某个属性
比例结果赋值给一个flag（例子中的isSelected属性）,由这个flag去控制：class
从而实现数据驱动样式

思路来自 《Learn Vue2: Step by Step》 by laracasts

这篇关于vue.js怎么动态设置css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！