vue排他思想

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>

  <style>
    .isActive {
      background-color: pink;
    }
  style>
head>

<body>

  <div id="app">
    <ul>
      <li v-for="(item,index) in 5" :key="item" @click="handleClick(index)" :class="{isActive:this.curIndex===index}">
        {{item}}li>
    ul>
  div>

  <script src="https://unpkg.com/vue@next">script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          // 记录当前点击的下标
          curIndex: -1
        }
      },
      methods: {
        handleClick(index) {
          this.curIndex = index
        }
      }
    })

    app.mount('#app')
  script>
body>

html>

点击不同li,改变当前li的背景色
vue排他思想_第1张图片

你可能感兴趣的:(vue,vue.js,javascript,前端)