如何在css中使⽤js的变量呢？
在开发中我们经常需要根据数据的个数或其他数据来设置元素的宽度或者其他属性。
js提供了这样的⽅法可以实现。
使⽤原⽣js操作dom的⽅法来改变样式。
但在vue开发中有更简单的实现⽅案，并且可动态获取数据，并调整样式。
<view class="h-tab-select">
<view class="tab-content">
<template v-for="(item,index) in list">
<view class="tab-item" :class="{active:hIndex==index}" :key="index" @tap="tapTab(index)">
<text class="tab-item-text">{{item.name}}</text>
<text class="tab-item-text number" v-if="showNumber">({{item.number}})</text>
</view>
</template>
</view>
</view>
如上，是⼀个tab组件的封装，在不确定tab个数的情况下，如何动态设置每个tab的宽度呢？
我们可以在标签.tab-content上添加: 将tab数量传⼊css变量⾥。然后再css中直接使⽤该变量。
.tab-item{
width:calc(100% / var(--listlength));
text-align: center;
padding:20upx 0;原生js和js的区别
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。