我的 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 用來標識 button，data 是新聞資訊的數(shù)據(jù)。

改造 <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 執(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 則是當 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)站的支持！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com