uni-app virtualHost中使用for循环会将最外层的class带到循环的标签中

uni-app virtualHost中使用for循环会将最外层的class带到循环的标签中

项目信息 版本/方式
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 Monterey12.5.1
第三方开发者工具版本号 4.0.8
基础库版本号 2.0.2-3080720230630001
项目创建方式 CLI
CLI版本号 5.0.8

操作步骤：

如上

预期结果：

v-for的标签中不出现外层的class

实际结果：

存在外层class

bug描述：

组件text

<template>  
    <view>  
        <button v-for="item in 10">123</button>  
    </view>  
</template>  

<script>  
    export default {  
        name:"test",  
    options: {  
      virtualHost: true  
    },  
        data() {  
            return {  

            };  
        },  
        mounted(){  
            console.log(1)  
        }  
    }  
</script>  

<style>  

</style>

页面

<template>  
 <view>  
     <test class='test'></test>  
     123  
  </view>  
</template>  
<script>  
    import test from '@/components/test.vue'  
    export default{  
        components:{  
            test  
        },  
        mounted(){  
            console.log(2)  
        }  
    }  
</script>


更多关于uni-app virtualHost中使用for循环会将最外层的class带到循环的标签中的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

可以先把<test class='test'></test> 的 class=‘test’ 加到上级view上

更多关于uni-app virtualHost中使用for循环会将最外层的class带到循环的标签中的实战教程也可以访问 https://www.itying.com/category-93-b0.html


只能算是规避的方法，但这确实是个bug

在 uni-app 中使用 v-for 进行循环渲染时，如果最外层的标签带有 class，这个 class 会被应用到 v-for 循环的每一个子元素上。这是因为 v-for 会将最外层的标签作为模板，循环生成多个相同结构的元素，并且这些元素会继承外层标签的所有属性，包括 class。

示例

假设你有以下代码：

<template>
  <div class="outer-class">
    <div v-for="item in items" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  }
};
</script>

在这个例子中，outer-class 会被应用到每一个 v-for 循环生成的 div 上，最终生成的 HTML 可能如下：

<div class="outer-class">
  <div class="outer-class">Item 1</div>
  <div class="outer-class">Item 2</div>
  <div class="outer-class">Item 3</div>
</div>

解决方法

如果你不希望 outer-class 被应用到每一个循环生成的子元素上，可以考虑以下几种方法：

1. 使用 template 标签包裹 v-for

template 标签不会被渲染为实际的 DOM 元素，因此它不会带有 class 属性。

<template>
  <div class="outer-class">
    <template v-for="item in items" :key="item.id">
      <div>
        {{ item.name }}
      </div>
    </template>
  </div>
</template>

2. 将 class 放在 v-for 循环的内部

你可以将 class 放在 v-for 循环的内部，这样它就不会被继承到每一个子元素上。

<template>
  <div>
    <div v-for="item in items" :key="item.id" class="inner-class">
      {{ item.name }}
    </div>
  </div>
</template>

3. 使用 scoped 样式

如果你希望样式只在当前组件中生效，可以使用 scoped 样式。这样即使 class 被继承到子元素上，也不会影响其他组件。

<style scoped>
.outer-class {
  /* 样式 */
}
</style>
回到顶部