vue 中ul li标签怎么修改样式
时间: 2024-05-10 15:21:22 浏览: 34
1. 使用样式对象
可以通过在`style`标签中定义样式对象,然后将其绑定到`ul`元素上。
```
<template>
<ul :style="ulStyle">
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
list: [1, 2, 3, 4],
ulStyle: {
listStyleType: 'none',
padding: '0 20px',
margin: '20px 0',
backgroundColor: '#f5f5f5',
borderRadius: '5px'
}
}
}
}
</script>
```
2. 使用class类
可以通过定义一个class类,然后将其应用到`ul`元素上。
```
<template>
<ul class="my-ul">
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
list: [1, 2, 3, 4]
}
}
}
</script>
<style>
.my-ul {
list-style-type: none;
padding: 0 20px;
margin: 20px 0;
background-color: #f5f5f5;
border-radius: 5px;
}
</style>
```
3. 使用内联样式
可以直接在`ul`元素上使用内联样式来修改样式。
```
<template>
<ul style="list-style-type:none; padding: 0 20px; margin: 20px 0; background-color: #f5f5f5; border-radius: 5px;">
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
list: [1, 2, 3, 4]
}
}
}
</script>
```
以上三种方式都可以修改`ul`和`li`元素的样式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)