快捷導(dǎo)航

vue3.0 CLI - 2.3 - 組件 home.vue 中學(xué)習(xí)指令和綁定

更新時間：2018年09月14日 10:51:48 作者：nDos

這篇文章主要介紹了vue3.0 CLI - 2.3 - 組件 home.vue 中學(xué)習(xí)指令和綁定的相關(guān)知識，本文通過實例代碼相結(jié)合的形式給大家介紹的非常詳細 ,需要的朋友可以參考下

我的 github 地址 - vue3.0Study - 階段學(xué)習(xí)成果都會建立分支。

首先美化一下界面 - 相關(guān)的界面代碼不粘貼，可從我的 github 分支中看到。下面最終的實現(xiàn)效果圖：

改造下 data 中的 navs 屬性 ( navs 數(shù)組每個元素都是包含 active 和 data 屬性的對象 )：

created: function () {
 fetch('https://www.apiopen.top/journalismApi')
  .then(v => v.json())
  .then(v => {
  this.tts = v.data.toutiao
  this.navs = v.data
  console.log(this.navs);
  Reflect.ownKeys(v.data).forEach((key, index) => {
   this.navs[key] = {
   active: key === 'toutiao',
   data: this.navs[key]
   }
  })
  })
 }

其中的 active 用來標(biāo)識 button，data 是新聞資訊的數(shù)據(jù)。

改造 <div class="nav"> 標(biāo)簽：

<div class="nav">
  <div v-for="(value, key, index) in navs"
  :key="index"
  :class="{ active: value.active }"
  @click="changeNav(key)"
  >
  {{key}}
  </div>
</div>

其中加入 :class="{ active: value.active }" ，當(dāng)前 button 是激活時，增加 .active。@click="changeNav(key)"，當(dāng)點擊 button 執(zhí)行組件中定義的 changeNav 函數(shù)，并傳入 key 作為參數(shù)。

　methods: {
 changeNav: function(akey){
  Reflect.ownKeys(this.navs).forEach((key, index) => {
  this.navs[key].active = akey === key && (this.tts = this.navs[key].data);
  })
 }
 },

以上是組件中定義的 changeNav 方法。代碼中僅僅改變了 navs 數(shù)組中每個 avtive 的值，便可以切換 button 的選中狀態(tài)；而 this.tts = this.navs[key].data 則是當(dāng) button 選中時替換組件 tts 屬性指向的對象。

以上，介紹了方法定義、指令、class 綁定的內(nèi)容，也介紹了如何動態(tài)的渲染和切換。

插值技術(shù)這里僅僅用到 {{ 組件屬性 }} 的方式，還有很多其他的方式；計算屬性是根據(jù)組件已有的屬性，計算出來的“屬性”，也不是高深的內(nèi)容；事件處理僅介紹簡單的函數(shù)執(zhí)行，還有事件修飾符；這些內(nèi)容請參閱 vue 官方教程學(xué)習(xí)。

關(guān)于條件渲染和列表渲染通過兩篇文章的學(xué)習(xí)，應(yīng)該掌握基本的用法。v-show 和 v-if 的區(qū)別也要注意 ( 性能上有差別 )；列表渲染也有注意地方，還有列表過濾；這些內(nèi)容請參閱 vue 官方教程學(xué)習(xí)。

總結(jié)

以上所述是小編給大家介紹的vue3.0 CLI - 2.3 - 組件 home.vue 中學(xué)習(xí)指令和綁定，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: