vue开发常见需求

v-for

遍历数组

<ul>
  <li v-for="(item, index) in booksList" :key="item.id">
    <span>{{ item.name }}</span>
  </li>
</ul>

遍历对象

<p v-for="(val,key) in obj" :key="key">--键是--{{key}}--值是--{{val}}</p>

动态class

 <li
    v-for="item in list"
    :key="item.id"
    :class="{ activeProject: item.isActive }"
    @click="changeActive(item)"
>
    <span>{{ item.name }}</span>
</li>

<script>
function changeActive(item) {
    list.value.forEach(e => {
        e.isActive = e.id === item.id;
    })
}
</script>

重写css

<style scoped>
.main-class >>> .jsoneditor-menu {
    // /*这种是vue2的写法，是错误的*/
}

/*应该是这样的写法*/
.main-class :deep(.jsoneditor-menu) {
  background-color: #f0f0f0;
  color: #333;
}
</style>