收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > JavaScript技巧 > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

vue中用動態組件實現選項卡切換效果

最近在研究vue的路上,那么今天也算個學習筆記吧!

導航按鈕:

<div class="tab-title"> 
      <p @click="a='tab1'"><router-link to='/collectnewcars'>新車</router-link><em></em></p>
      <p @click="a='tab2'"><router-link to='/collectusedcars'>二手車</router-link><em></em></p>
      <p @click="a='tab3'"><router-link to='/collectproducts'>車品</router-link></p>
    </div>

<div class="tabs">
  <component is:="current"></component>
</div>

寫3個子組件分別為

<tab1></tab1>
<tab2></tab2>
<tab3></tab3>

js里面用局部組件引入這三個子組件

//數據里面
data (){
  return {
    a:'tab1'   //默認顯示tab1子組件
  }
}
components:{
  'tab1':tab1,
  'tab2':tab2,
  'tab3':tab3
}

如果要從父組件里面往這些字組件里面傳數據,和普通的父組件-》子組件傳遞數據是一個道理,只不過在這個里面綁定一次屬性,就可以在每個子組件里面都接收到數據,例如:

<component :is="current" :clients-data="client" :refresh-data="getClient" :user-type-data="userTypes"></component>

在子組件里面定義props:[]后,就可以接收到父組件傳來的方法,以及數據

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持積木網。

vue2.0實戰之使用vue-cli搭建項目(2)
Vue-cli是官方推薦的快速構建單頁應用的腳手架。官方給的建議,如果你是初次嘗試Vue,哪就老老實實用普通的書寫引入js文件,這里牽扯太多的東西,

詳解VUE的狀態控制與延時加載刷新
在實際項目中,我們經常會遇到這種狀況,某些數據我們希望等到需要的時候再去獲取,或者某些數據我們需要刷新,但是不必立刻刷新,而是延時到

使用AngularJS2中的指令實現按鈕的切換效果
之前在AngularJS2中一種button切換效果的實現(二)中實現了按鈕的切換效果,但是方法比較low,這次我們使用Angular2的指令來實現。指令實現hover效果import

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
上海时时乐基本走势综合版