lom599乐百家官网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="chooseLanglang" 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="chooseLanglang"
      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: functionlang {
      this.selectedLang = lang;
    },
  }
}

(看完/读完)这篇文章有何感想! lom599乐百家官网的分享…

发表评论

姓名 *
电子邮件 *
站点