我的 github 地址 - vue3.0Study - 階段學習成果都會建立分支。

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

改造下 data 中的 navs 屬性 ( navs 數組每個元素都是 包含 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 用來標識 button，data 是新聞資訊的數據。

改造 <div class="nav"> 標簽：

<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 }" ，當前 button 是激活時，增加 .active。@click="changeNav(key)"，當點擊 button 執行組件中定義的 changeNav 函數，并傳入 key 作為參數。

　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 數組中每個 avtive 的值，便可以切換 button 的選中狀態；而 this.tts = this.navs[key].data 則是當 button 選中時替換組件 tts 屬性指向的對象。

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

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

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

總結

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