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 用來(lái)標(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ì)算出來(lái)的“屬性”，也不是高深的內(nèi)容；事件處理僅介紹簡(jiǎn)單的函數(shù)執(zhí)行，還有事件修飾符；這些內(nèi)容請(qǐng)參閱 vue 官方教程學(xué)習(xí)。
關(guān)于條件渲染和列表渲染通過(guò)兩篇文章的學(xué)習(xí)，應(yīng)該掌握基本的用法。v-show 和 v-if 的區(qū)別也要注意 ( 性能上有差別 )；列表渲染也有注意地方，還有列表過(guò)濾；這些內(nèi)容請(qǐng)參閱 vue 官方教程學(xué)習(xí)。
總結(jié)
以上所述是小編給大家介紹的vue3.0 CLI - 2.3 - 組件 home.vue 中學(xué)習(xí)指令和綁定 ，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
本篇文章給大家詳細(xì)介紹了vue跨域處理問(wèn)題的方式以及相關(guān)知識(shí)點(diǎn)介紹，對(duì)此有興趣的朋友學(xué)習(xí)下。2018-02-02
vue實(shí)現(xiàn)商城秒殺倒計(jì)時(shí)功能
這篇文章主要介紹了vue實(shí)現(xiàn)商城秒殺倒計(jì)時(shí)功能,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
nrm是一個(gè)npm源管理器,允許快速切換不同npm源,提高包管理效率,下面就來(lái)介紹一下VUE安裝nrm管理多個(gè)npm源的方法示例,感興趣的可以了解一下2025-01-01
在Vue組件化中利用axios處理ajax請(qǐng)求的使用方法
這篇文章主要給大家介紹了在Vue組件化中利用axios處理ajax請(qǐng)求的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
vue3中如何使用Pinia實(shí)現(xiàn)數(shù)據(jù)持久化操作
使用vue3中的pinia,我們可以在多個(gè)頁(yè)面間共享數(shù)據(jù),但是一旦我們關(guān)閉或刷新頁(yè)面,這些數(shù)據(jù)就會(huì)丟失,因此,我們需要有一種數(shù)據(jù)持久化的解決方案,下面我們就來(lái)看看具體如何解決的吧2023-10-10
使用Vue開(kāi)發(fā)自己的Chrome擴(kuò)展程序過(guò)程詳解
這篇文章主要介紹了使用Vue開(kāi)發(fā)自己的Chrome擴(kuò)展程序過(guò)程詳解，瀏覽器擴(kuò)展程序是可以修改和增強(qiáng) Web 瀏覽器功能的小程序。它們可用于各種任務(wù)，例如阻止廣告，管理密碼，組織標(biāo)簽，改變網(wǎng)頁(yè)的外觀(guān)和行為等等。,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了記錄vue做微信自定義分享的一些問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vite的常見(jiàn)配置選項(xiàng)詳細(xì)說(shuō)明
相信大部分兄弟都體驗(yàn)過(guò)Vite了,都知道它很快,在學(xué)習(xí)的時(shí)候,官網(wǎng)上的各種配置也是看的眼花繚亂,不知道哪些是必要掌握的,下面這篇文章主要給大家介紹了關(guān)于Vite常見(jiàn)配置選項(xiàng)的相關(guān)資料,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue組件之間進(jìn)行傳值的方法，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容戒殺，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-09-09
Vue源碼解析之?dāng)?shù)組變異的實(shí)現(xiàn)
這篇文章主要介紹了Vue源碼解析之?dāng)?shù)組變異的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12