<div id="app">
<div class="row">
<label for="list">list-style-type:</label>
<select id="list" v-model="selectedOption" @input="changeOption">
<option v-for="(item, index) in items" :value="item" >{{ item }}</option>
</select>
</div>
<div class="box">
<div class="item" v-for="(item, index) in items" style="list-style-type:var(--list-item-style)">item-{{index}}</div>
</div>
</div>
:root {
--list-item-style: none;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2vw;
}
#app {
border: 1px solid #eee;
border-radius: 5px;
box-shadow: 0 0 2px rgba(0,0,0,.25);
}
.row {
padding: 10px 20px;
border-bottom: 1px solid #eee;
background: #04abe3;
color: #fff;
border-radius: 5px 5px 0 0;
}
.box {
}
.item {
display: list-item;
list-style-position: inside;
padding: 10px 15px;
&:nth-child(odd) {
background-color: #efefef;
}
}new Vue({
el: '#app',
data: {
selectedOption: 'none',
items: [
'disc',
'circle',
'square',
'decimal',
'decimal-leading-zero',
'lower-roman',
'upper-roman',
'lower-greek',
'lower-latin',
'upper-latin',
'armenian',
'georgian',
'lower-alpha',
'upper-alpha',
'none',
'inherit'
]
},
methods: {
changeOption: function(e) {
document.documentElement.style.setProperty('--list-item-style', e.target.value);
console.log(e.target.value)
}
},
})
External CSS
This Pen doesn't use any external CSS resources.