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