vue3.0 CLI - 2.3 - 組件 home.vue 中學(xué)習(xí)指令和綁定
我的 github 地址 - vue3.0Study - 階段學(xué)習(xí)成果都會(huì)建立分支。
首先美化一下界面 - 相關(guān)的界面代碼不粘貼，可從我的 github 分支中看到。下面最終的實(shí)現(xiàn)效果圖：
改造下 data 中的 navs 屬性 ( navs 數(shù)組每個(gè)元素都是 包含 active 和 data 屬性的對(duì)象 )：
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)識(shí) 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 是激活時(shí)，增加 .active。@click="changeNav(key)"，當(dāng)點(diǎn)擊 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ù)組中每個(gè) avtive 的值，便可以切換 button 的選中狀態(tài)；而 this.tts = this.navs[key].data 則是當(dāng) button 選中時(shí)替換組件 tts 屬性指向的對(duì)象。
以上，介紹了方法定義、指令、class 綁定的內(nèi)容，也介紹了如何動(dòng)態(tài)的渲染和切換。
插值技術(shù)這里僅僅用到 {{ 組件屬性 }} 的方式，還有很多其他的方式；計(jì)算屬性是根據(jù)組件已有的屬性，計(jì)算出來的“屬性”，也不是高深的內(nèi)容；事件處理僅介紹簡單的函數(shù)執(zhí)行，還有事件修飾符；這些內(nèi)容請(qǐng)參閱 vue 官方教程學(xué)習(xí)。
關(guān)于條件渲染和列表渲染通過兩篇文章的學(xué)習(xí)，應(yīng)該掌握基本的用法。v-show 和 v-if 的區(qū)別也要注意 ( 性能上有差別 )；列表渲染也有注意地方，還有列表過濾；這些內(nèi)容請(qǐng)參閱 vue 官方教程學(xué)習(xí)。
總結(jié)
以上所述是小編給大家介紹的vue3.0 CLI - 2.3 - 組件 home.vue 中學(xué)習(xí)指令和綁定 ，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
詳解vue中父子組件傳遞參數(shù)props的實(shí)現(xiàn)方式
這篇文章主要給大家介紹了在vue中，父子組件傳遞參數(shù)?props?實(shí)現(xiàn)方式，文章通過代碼示例介紹的非常詳細(xì)，對(duì)我們的學(xué)習(xí)或工作有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07
vue父子組件傳值不能實(shí)時(shí)更新的解決方法
Vue是一個(gè)以數(shù)據(jù)驅(qū)動(dòng)、組件化的前端框架,其中組件化是Vue中較為重要的概念之一,組件之間的通信則成為Vue中較為普遍的需求,下面這篇文章主要給大家介紹了關(guān)于vue父子組件傳值不能實(shí)時(shí)更新的解決方法,需要的朋友可以參考下2023-05-05
vue實(shí)現(xiàn)自動(dòng)滑動(dòng)輪播圖片
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)自動(dòng)滑動(dòng)輪播圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue項(xiàng)目main.js使用方法詳細(xì)介紹
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目main.js使用方法的相關(guān)資料,main.js文件是程序的入口文件,加載各種公共組件,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
這篇文章主要介紹了詳解vue掛載到dom上會(huì)發(fā)生什么，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
iview的table組件自帶的過濾器實(shí)現(xiàn)
這篇文章主要介紹了iview的table組件自帶的過濾器實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
uniapp模仿微信實(shí)現(xiàn)聊天界面的示例代碼
這篇文章主要介紹了如何利用uniapp模仿微信，實(shí)現(xiàn)一個(gè)聊天界面。文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定的幫助，感興趣的可以了解一下2022-01-01
詳解Element-ui NavMenu子菜單使用遞歸生成時(shí)使用報(bào)錯(cuò)
這篇文章主要介紹了詳解Element-ui NavMenu子菜單使用遞歸生成時(shí)使用報(bào)錯(cuò)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Vue3?封裝擴(kuò)展并簡化Vuex在組件中的調(diào)用問題
這篇文章主要介紹了Vue3?封裝擴(kuò)展并簡化Vuex在組件中的調(diào)用,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
vue,angular,avalon這三種MVVM框架優(yōu)缺點(diǎn)
本文給大家具體分析了下vue,angular,avalon這三種MVVM框架優(yōu)缺點(diǎn)，十分的細(xì)致全面，有需要的小伙伴可以參考下2016-04-04