Question

我正在尝试使用<header class="main-hd"> <a href="https://www.douban.com/people/lime/" class="avator"> <img width="24" height="24" src="https://img3.doubanio.com/icon/u1023412-1.jpg"> </a> <a href="https://www.douban.com/people/lime/" class="name">lemon</a> <span class="allstar40 main-title-rating" title="推荐"></span> <span content="2005-09-26" class="main-meta">2005-09-26 17:20:32</span> </header> headers={"User-Agent":"Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50"} url="https://movie.douban.com/subject/1291561/?from=showing" data=requests.get(url,headers=headers) from lxml import etree selector=etree.HTML(data.text) comments = selector.xpath('//div[@class="main review-item"]') for comment in comments{ user = comment.xpath('.//header/a/text()') print(user) rate = comment.xpath('.//header/span[1]/element') print(rate) }创建一个选项列表，您一次只能选择一个选项。效果很好，只是我无法取消选择该选项。

v-for

JS

<div id="main">
  <ul>
    <li 
        v-for="l in list" 
        id="l.key"
        @click="selectone(l.key, l.isSelected)"
        v-bind:class="{ selected : l.isSelected, notselected : !l.isSelected }"
        > {{ l.tec }} </li>
   <ul>
</div>

CSS

new Vue({
  el:"#main",
  data: {
    list: [
      {key:"0", tec:"html", isSelected:false},
      {key:"1", tec:"css", isSelected:false},
      {key:"2", tec:"JS", isSelected:false},
      {key:"3", tec:"Git", isSelected:false},
      {key:"4", tec:"NodeJS", isSelected:false},
      {key:"5", tec:"Postgres", isSelected:false}
    ]
  },
  methods: {
    selectone: function(k, o) {
      for( i = 0; i < this.list.length; i ++ ) {
        if(this.list[i].isSelected == true ) {
          this.list[i].isSelected = false
        }
      }
      this.list[k].isSelected = !this.list[k].isSelected;
    }
  }
})

每次单击元素时，循环都不会停用所有选项吗？

Answer 1

您的关闭。试试这个：（未经测试）

<div id="main">
  <ul>
    <li 
        v-for="(l,index) in list" 
        id="l.key"
        @click="selectone(l, index)"
        v-bind:class="{ selected : l.isSelected, notselected : !l.isSelected }"
        > {{ l.tec }} </li>
   <ul>
</div>

JS

new Vue({
  el:"#main",
  data: {
    list: [
      {key:"0", tec:"html", isSelected:false},
      {key:"1", tec:"css", isSelected:false},
      {key:"2", tec:"JS", isSelected:false},
      {key:"3", tec:"Git", isSelected:false},
      {key:"4", tec:"NodeJS", isSelected:false},
      {key:"5", tec:"Postgres", isSelected:false}
    ]
  },
  methods: {
    selectone:function(l, index){

      for( i = 0; i < this.list.length; i ++ ) {
        this.list[i].isSelected = false
        }
      l.isSelected = true;
      }
    }
  }
})

解释您在函数中使用变量k时错过了。那应该是整个对象而不是索引

Answer 2

在main.go中，您为所有列表项设置selectone()，然后尝试尝试切换所选列表项的{{1 }}，它先前已设置为isSelected=false（即，“切换”将始终为所选项目设置isSelected）。

该循环应排除所选项目的键：

false

但是，触发代码本身需要进行错误修复才能正确查找列表项。 isSelected=true的第一个参数是列表项的selectone(key) { for (let i = 0; i < this.list.length; i++) { if (this.list[i].key !== key) { this.list[i].isSelected = false } } // this.toggleSelection(key) }属性。为了通过键从selectone()数组中获取项目，您必须搜索key，例如，使用Array.prototype.find()：

list

list

toggleSelection(key) {
  const listItem = this.list.find(item => item.key === key)
  if (listItem) {
    listItem.isSelected = !listItem.isSelected
  }
}

new Vue({
  el: '#app',
  data: {
    list: [
      {key:"0", tec:"html", isSelected:false},
      {key:"1", tec:"css", isSelected:false},
      {key:"2", tec:"JS", isSelected:false},
      {key:"3", tec:"Git", isSelected:false},
      {key:"4", tec:"NodeJS", isSelected:false},
      {key:"5", tec:"Postgres", isSelected:false}
    ]
  },
  methods: {
    selectone(key) {
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].key !== key) {
          this.list[i].isSelected = false
        }
      }

      this.toggleSelection(key)
    },
    toggleSelection(key) {
      const listItem = this.list.find(item => item.key === key)
      if (listItem) {
        listItem.isSelected = !listItem.isSelected
      }
    }
  }
})

或者，您可以跟踪所选索引，将其设置在项目的.selected { background:lightpink; } .notselected { background:lightblue; }处理程序中，然后根据与所选索引匹配的项目索引设置<script src="https://unpkg.com/vue@2.6.10"></script> <div id="app"> <ul> <li v-for="l in list" id="l.key" @click="selectone(l.key, l.isSelected)" v-bind:class="{ selected : l.isSelected, notselected : !l.isSelected }" > {{ l.tec }} </li> <ul> </div>绑定：

click

class

// template
<li 
  v-for="(l, index) in list" 
  id="l.key"
  @click="selectedIndex = index"
  v-bind:class="{ selected: index === selectedIndex, notselected: index !== selectedIndex }"
  > {{ l.tec }} </li>

// script
export default {
  data() {
    return {
      selectedIndex: -1,
      ...
    }
  }
}

new Vue({
  el: '#app',
  data: {
    selectedIndex: -1,
    list: [
      {key:"0", tec:"html", isSelected:false},
      {key:"1", tec:"css", isSelected:false},
      {key:"2", tec:"JS", isSelected:false},
      {key:"3", tec:"Git", isSelected:false},
      {key:"4", tec:"NodeJS", isSelected:false},
      {key:"5", tec:"Postgres", isSelected:false}
    ]
  }
})

在v-for中选择/取消选择单个元素

2 个答案: