vue實(shí)現(xiàn)點(diǎn)擊選中,其他的不選中方法

更新時(shí)間：2018年09月05日 15:56:20 作者：Alice9969

今天小編就為大家分享一篇vue實(shí)現(xiàn)點(diǎn)擊選中,其他的不選中方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

如下所示：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>選中效果</title>
 <script src="../static/js/vue.min.js"></script>
 <style>
  ul li.active{
   color: green;
  }
 </style>

</head>
<body>

<div id="app">
 <ul>
  <li v-for="items in navList" :class="{active:items.isActive}" @click="activeFun(items)">
   <a>
    {{items.text}}
   </a>
  </li>
 </ul>
</div>

<script>
 new Vue({
  el: '#app',
  data: {
   navList: [
    {text: '首頁(yè)', isActive: true},
    {text: '簡(jiǎn)介', isActive: false},
    {text: '活動(dòng)', isActive: false},
    {text: '聯(lián)系', isActive: false}
   ]
  },
  methods: {
   activeFun: function(data){
    this.navList.forEach(function(obj){
     obj.isActive = false;
    });
    data.isActive = !data.isActive;
   }
  }
 });
</script>


</body>
</html>

以上這篇vue實(shí)現(xiàn)點(diǎn)擊選中,其他的不選中方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue directive定義全局和局部指令及指令簡(jiǎn)寫
這篇文章主要介紹了vue directive定義全局和局部指令及指令簡(jiǎn)寫,本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-11-11
如何在Vue和Spring?boot之間實(shí)現(xiàn)前后端連接
最近搭建一個(gè)Springboot+vue前后端分離項(xiàng)目,真的很簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于如何在Vue和Spring?boot之間實(shí)現(xiàn)前后端連接的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-05-05
vue項(xiàng)目中使用window的onresize事件方式
這篇文章主要介紹了vue項(xiàng)目中使用window的onresize事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
詳細(xì)聊聊Vue中的MVVM模式原理
MVVM旨在利用WPF中的數(shù)據(jù)綁定函數(shù),通過(guò)從視圖層中幾乎刪除所有GUI代碼（代碼隱藏）,更好地促進(jìn)視圖層開(kāi)發(fā)與模式其余部分的分離,這篇文章主要給大家介紹了關(guān)于Vue.js中MVVM的相關(guān)資料,需要的朋友可以參考下
2023-03-03
基于vue3.0.1beta搭建仿京東的電商H5項(xiàng)目
這篇文章主要介紹了基于vue3.0.1beta搭建仿京東的電商H5項(xiàng)目，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點(diǎn)
這篇文章主要介紹了Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點(diǎn)說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
使用vue.js編寫藍(lán)色拼圖小游戲
之前在網(wǎng)上看到《藍(lán)色拼圖》這款小游戲，作者是用jquery寫的。下面通過(guò)本文給大家分享基于vue.js編寫藍(lán)色拼圖小游戲，一起看看實(shí)現(xiàn)代碼吧
2017-03-03
Vue科學(xué)計(jì)數(shù)法常見(jiàn)處理方法舉例
這篇文章主要給大家介紹了關(guān)于Vue科學(xué)計(jì)數(shù)法常見(jiàn)處理方法的相關(guān)資料,科學(xué)計(jì)數(shù)法是科學(xué)家用來(lái)表示很大或很小的數(shù)字的一種方便的方法,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下
2024-02-02
Vue原理剖析實(shí)現(xiàn)雙向綁定MVVM
這篇文章主要為大家剖析了Vue原理，實(shí)現(xiàn)雙向綁定MVVM，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
如何使用HBuilderX把vue項(xiàng)目打包成apk
這篇文章主要介紹了如何使用HBuilderX把vue項(xiàng)目打包成apk，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07