在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue這里為什么沒有加if

vue這里為什么沒有加if

這句話:class="{active: activeName == gameName}"的activeName是data里面定義的一個變量 我想問的問題是這里為什么不用加if判斷而是直接比較兩個變量呢activeName == gameName？這是什么用法？新手求大家解釋一下

<div id="app">
  <ul><div>選擇你最喜歡的愛好：</div>
      <li class="collection-item"
         v-for="gameName in gameNames"
         :class="{active: activeName == gameName}"
         @click="selected(gameName)">{{gameName}}
        </li> 
</ul>
</div>
new Vue({
  el: "#app",
  data: {
    gameNames: ['看書', '聽歌', '游泳', '健身', '看電影','旅游'],
    activeName: ''
  },
  methods: {
    selected: function(gameName) {
      this.activeName = gameName
    }
  }
})
回答
編輯回答
溫衫

:class="{active: activeName == gameName}"
這句話的意思是如果activeName == gameName的結(jié)果是true那么就給li添加上一個名字為active的類.
你所謂的加if判斷是想怎么寫？

更新
看了一下源碼

  if (val.__ob__) {
    var depId = val.__ob__.dep.id;
    if (seen.has(depId)) {
      return
    }
    seen.add(depId);
  }

大體意思應(yīng)該是將:class內(nèi)的類名添加到原生class中。

2017年7月20日 21:10
編輯回答
情已空

按你的思路，可以寫成 :class="activeName == gameName ? 'active' : ''"
一樣可行，看個人習(xí)慣。至于用if不行，因為綁定的數(shù)據(jù)可以是表達式和變量，但不能是語句。

2017年3月24日 20:49
編輯回答
舊時光

首先ul里最好不要嵌套div；
其次看了樓上的回答，我也學(xué)習(xí)了一下。vue實現(xiàn)數(shù)據(jù)綁定后 綁定的數(shù)據(jù)可以是 變量也可以是表達式、所以可以在:class中利用三目運算符直接判斷activeName的值是否等于gameName；
至于你說的if，是指v-if嗎？

關(guān)于 :class{active:flag}語法
綁定 HTML Class

對象語法

我們可以傳給?v-bind:class?一個對象，以動態(tài)地切換 class：

<div v-bind:class="{ active: isActive }"></div>

上面的語法表示?active?這個 class 存在與否將取決于數(shù)據(jù)屬性?isActive?的?truthiness。

你可以在對象中傳入更多屬性來動態(tài)切換多個 class。此外，v-bind:class?指令也可以與普通的 class 屬性共存。

2018年2月21日 00:45