javascript - vue怎么选中列表全部

问题描述

问 题

<ul id="head_bottom_r">
                <li>返回首页</li>
                <li class="online_consulting tooltip" tips="在线咨询请先登录QQ">在线咨询</li>
                <li class="lan_chose" @click="langAlClick">
                    语言<span class="lang_al">{{chosenLangShowText}}</span>
                </li>
            </ul>

            <ul class="lang_choose_lists" v-show="langBoxShow">
                <li class="lang_one" v-for="lang in langs" @click="chooseLang(lang)" v-if="lang.notChosen">{{lang.message}}</li>
            </ul>

 export default {
        data () {
            return {
                langs: [
                    {message: '简体中文', notChosen: false},
                    {message: '繁体中文', notChosen: true},
                    {message: '粤语', notChosen: true},
                    {message: 'English', notChosen: true}
                ],
                chosenLangShowText: '简体中文',
                langBoxShow: false,
            }
        },
        methods: {
            langAlClick: function () {
                this.langBoxShow = !this.langBoxShow;
            },
            chooseLang: function (lang) {
                this.chosenLangShowText = lang.message;
                //todo 把所有notchosen设为true
                lang.notChosen = false;//当前点击对象notChosen为false
            },
        }
    }

选项卡，请问下倒数第5行内todo该怎么来写？？？我想是实现点击选择后显示的{{chosenLangShowText}}和列表显示的不重复，始终加起来为4条，如果有其他更简便的方法更好，谢谢了

---

哎，看来还得靠自己。。。。。。

 for (var i=0;i<this.langs.length;i++){
      this.langs[i].notChosen=true;
 }

用原生js写了。。。有其他办法的可以评论，多谢了

解决方案

<ul id="head_bottom_r">
  <li>返回首页</li>
  <li class="online_consulting tooltip" tips="在线咨询请先登录QQ">在线咨询</li>
  <li class="lan_chose" @click="langAlClick">
    语言<span class="lang_al">{{selectedLang.message}}</span>
  </li>
</ul>

<ul class="lang_choose_lists" v-show="langBoxShow">
  <li class="lang_one"
      v-for="lang in langs"
      @click="chooseLang(lang)"
      v-if="lang !== selectedLang">
    {{lang.message}}
  </li>
</ul>

export default {
  data () {
    var langs = [
      {message: '简体中文'},
      {message: '繁体中文'},
      {message: '粤语'},
      {message: 'English'}
    ];

    return {
      langs: langs,
      selectedLang: langs[0],
      langBoxShow: false,
    }
  },
  methods: {
    langAlClick: function() {
      this.langBoxShow = !this.langBoxShow;
    },
    chooseLang: function(lang) {
      this.selectedLang = lang;
    },
  }
}

这篇关于javascript - vue怎么选中列表全部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！