vue在脚手架index.css中修改样式不生效

html-css021

vue在脚手架index.css中修改样式不生效,第1张

通过以下方式来改变el-table标签下的表格偶数行的样式。 注意：这个样式必须是全局的才会生效，即style标签不能加scoped,为了...选择器来限制样式，如 2.更复杂的情况，我们可以在使用标签后，在浏览器中打开页面，进入开发者模式（F12），查看该标签对应的class(浏览器会把组件都解析成html标签）

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

从而实现数据驱动样式