本文目录一览：
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);
})
}
vue css伪元素after的使用
开篇一句话：CSS的伪类，伪元素就当成vue的过滤器使用就好了，我也是想到这个突然就茅塞顿开了。
用法：
:after 选择器表示向选定的元素之后插入内容。
要有content属性
需求举例：div按钮后面有个朝下的ico,点击div后 ico方向朝上
实现办法:
1.可以使用JS实现，div的class名绑定到一个变量上，根据变量的真假值更换class
2.伪类的实现方法
先说思路：
要借助两个class，基础class(‘base_class’)和激活class(‘rotate’).
base_class
相对定位。
base_class:after
放ico朝上的样式，绝对定位。
rotate不要单独加after，不然会取代掉base_class的after,
要两个class都出现才加after
rotate绑定到一个布尔变量上，该变量的真假值由open_select_window更改
html:
解决vuejs项目里css引用背景图片不能显示的问题
解决：build-utils.js里，修改：增加
publicPath:’../../’,
if
(options.extract)
{
return
ExtractTextPlugin.extract({
use:
loaders,
publicPath:’../../’,
fallback:
‘vue-style-loader’
})
}
else
{
return
[‘vue-style-loader’].concat(loaders)
}
以上这篇解决vuejs项目里css引用背景图片不能显示的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:解决vue打包之后静态资源图片失效的问题解决vue打包css文件中背景图片的路径问题详谈vue+webpack解决css引用图片打包后找不到资源文件的问题vue
cli使用绝对路径引用图片问题的解决关于Vue背景图打包之后访问路径错误问题的解决
Vue3中CSS的新玩法-CSS模块 amp; 动态CSS
Vue3对CSS支持加入了更多的特性支持，这样的话，我们在项目当中使用CSS就变得更加灵活了，来吧我们直接上干货
在style的标签上加一个module的属性，这样style里面的内容就会被编译成CSS Modules（模块），默认情况下，我们可以在模板代码里，或者JS里通过$style拿到所有样式属性并使用
我们也可以给CSS Modules自定义一个名称，在style的module属性设置一个名称就可以了,这样的话在模板和JS里就通过自定义的名称来引入CSS里的属性
与组合式 API 一同使用，注入的类可以通过 useCssModule API 在 setup() 和 .success { color: #090; }
可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上
这个语法同样也适用于
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/288694.html
微信扫一扫 
支付宝扫一扫 