Vue2.0 實(shí)現(xiàn)單選互斥的方法
更新時(shí)間：2018年04月13日 09:21:48 作者：懶惰的小白
本篇文章主要介紹了Vue2.0 實(shí)現(xiàn)單選互斥的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
本文介紹了Vue2.0 實(shí)現(xiàn)單選互斥的方法，分享給大家，具體如下：
需要實(shí)現(xiàn)如上圖的功能
1. 首次加載頁(yè)面，根據(jù)data里的catgoryId高亮對(duì)應(yīng)的選項(xiàng)
2. 點(diǎn)擊某個(gè)選項(xiàng)，該選項(xiàng)高亮，其他去掉高亮
代碼結(jié)構(gòu)：
<template>
<dd @click="changeCategory(currCourseFirst.categoryId)"
v-for="currCourseFirst in currCourse.currCourseFirst"
:key="currCourseFirst.categoryId"
:class="resultCategoryId === currCourseFirst.categoryId ? 'active': ''" >
{{currCourseFirst.name}}
</dd>
</template>
<script>
export default{
data() {
return {
categeryId: this.$route.query.categoryId,
typeId: this.$route.query.typeId
}
},
methods: {
changeCategoryId(categoryId) {
this.categoryId = categoryId
}
},
computed: {
resultCategoryId(){
return this.categoryId
}
}
}
</script>
自我理解
參考鏈接：http://www.fzitv.net/article/138185.htm
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue中watch的實(shí)際開(kāi)發(fā)學(xué)習(xí)筆記
watch是Vue實(shí)例的一個(gè)屬性是用來(lái)響應(yīng)數(shù)據(jù)的變化,需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開(kāi)銷(xiāo)較大的操作時(shí),這個(gè)方式是最有用的,下面這篇文章主要給大家介紹了關(guān)于vue中watch的實(shí)際開(kāi)發(fā)筆記,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了前端框架Vue.js中Directive知識(shí)，感興趣的小伙伴們可以參考一下2016-09-09
Vue中的路由導(dǎo)航守衛(wèi)導(dǎo)航解析流程
這篇文章主要介紹了Vue中的路由導(dǎo)航守衛(wèi)導(dǎo)航解析流程,正如其名，vue-router 提供的導(dǎo)航守衛(wèi)主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。這里有很多方式植入路由導(dǎo)航中：全局的，單個(gè)路由獨(dú)享的，或者組件級(jí)的2023-04-04
這篇文章主要介紹了vue router 路由跳轉(zhuǎn)方法概述,使用到Vue的項(xiàng)目，我們最常見(jiàn)使用的就是Vue配套的Vue Router庫(kù)，本文結(jié)合示例代碼給大家詳細(xì)講解，需要的朋友可以參考下2022-12-12
vue3 中的 hooks 就是函數(shù)的一種寫(xiě)法,就是將文件的一些單獨(dú)功能的js代碼進(jìn)行抽離出來(lái)進(jìn)行封裝使用,下面我們就來(lái)看看vue3中自定義Hooks函數(shù)的使用吧2023-09-09
這篇文章主要介紹了Element el-row el-col 布局組件使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
本文主要介紹了Vue-Element-Admin前端接入SSO的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
詳解vuejs中執(zhí)行npm run dev出現(xiàn)頁(yè)面cannot GET/問(wèn)題
這篇文章主要介紹了詳解vuejs中執(zhí)行npm run dev出現(xiàn)頁(yè)面cannot GET/問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue 界面刷新數(shù)據(jù)被清除 localStorage的使用詳解
今天小編就為大家分享一篇vue 界面刷新數(shù)據(jù)被清除 localStorage的使用詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了Vue CLI 3搭建vue+vuex最全分析(推薦)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09