vue学习笔记-点击li给当前li添加背景色（3）

vue 点击li给当前li添加背景色

思路1：循环li列表并且获取到当前li的索引值
看代码：

<div id="app">
    <h1>{{ msg }}</h1>
    <input type="text" v-model="msg">
    <button v-on:click="getMsg()">获取表单数据</button>
    <button v-on:click="setMsg()">设置表单数据</button> 
    <br>
    <hr>
    <ul>
      <li v-for="(item,index) in list" :key='index' :class="{'red':index==0}" @click="addColor(index)">
        {{item}}
      </li>
    </ul>
  </div>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: '你好vue',
      list:[
        '1111','2222','3333'
      ]
    }
  },
  methods:{
    getMsg(){
      alert(this.msg)
    },
    setMsg(){
      alert(this.msg='我是设置的值')
    },
    addColor(index){
        console.log(index) //控制台输出
    }
  }
}
</script>

点击li控制台输出对应的li索引值 如下图：

思路2：绑定class样式 给一个状态值isactive 判断index==isactive 值相等为true成立 样式就会显示

<ul>
      <li v-for="(item,index) in list2" :key='index' v-bind:class='{bg:index==isactive}'  @click="addBg(index)">
        {{item}}
      </li>
    </ul>

把index值赋给isactive 此时绑定样式中的index==isactive成立 样式就会生效

  addBg(index){
      this.isactive=index;
      console.log("isactive的值"+this.isactive);//输出isactive的值
      console.log("index的值"+index);//输出index的值
    }

如下图(这里后来做了优化 key是index)