vue怎样修改css样式,vue改变css样式

vue.js怎么动态设置css

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

从而实现数据驱动样式

相关问答

Q1: vuejs的组件化开发中，要怎么自定义class，覆盖原有的css样式

el-table-column并不是一个dom节点，所以infotext这个类究竟用在哪，需要看下el-table-column这个组件的实现才知道。

用了第三方组件的必然都会遇到你这样的问题，我说下我的解决方法，不一定是好的。

一个vue文件可以写多个style/style，加上socped代表本组件的样式，不污染全局。如果需要覆盖第三方组件样式，则不能加scoped，因此需要另写一个style.xxx-component{...}/style，这里用一个大类包裹防止污染全局。

接着，我用比较笨的方法(有好的方法请告知)，就是打开f12检查究竟要覆盖哪些样式，然后写在没有加scoped的style里即可。

其实一些好的第三方UI库都有提供自定义样式的方法的，这样实现起来才是最便捷的。

Q2: 怎么改变Quasar组件里面的css样式？

Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的开源框架（基于Vue），可帮助Web开发人员创建：

响应式网站

PWA（Progressive Web App）

通过Apache Cordova构建移动APP（Android，iOS，…）

多平台桌面应用程序（使用Electron）

Quasar允许开发人员编写一次代码，然后使用相同的代码库同时部署为网站、PWA、Mobile App和Electron App。使用最先进的CLI设计应用程序，并提供精心编写，速度非常快的Quasar Web组件。

当使用Quasar时，你不需要像Hammerjs，Momentjs或Bootstrap这样的额外重型库。它拥有这些功能，而且体积很小！

Q3: vue css样式需要刷新才能加载出来

最近发现一个比较奇怪的问题，就是在开发vue中，路由点击跳转到另外一个组件中，样式是不出来的，然后刷新当前页面css样式才加载出来，找了好久才发现这个bug。

进入以后样式是这样的：css样式根本没有加载，这是为什么？

刷新了页面以后才可以出来，本身样式也是这样的：

找了半天原因，一点一点测试才发现

原来渲染的组件的父盒子的class='item'居然影响了css样式的内容，很奇怪，把class='item'修改成比如：class='abc'就可以了。

原文地址和更多信息：

Q4: vue项目中刷新页面css样式才会出来是为什么？

渲染的组件的父盒子的class='item'影响了css样式的内容，把class='item'修改成比如：class='abc'就可以了。

三人行慕课