开发设计微信小程序_Vue.js组件tab完成选项卡切换

  • 栏目:公司新闻 时间:2021-01-12 13:16 分享新闻到:
<返回列表

Vue.js组件tab实现选项卡切换       这篇文章主要为大家详细介绍了Vue.js组件tab实现选项卡切换的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下

效果图:

代码如下:

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title Document /title 
 style type="text/css" 
 *{padding: 0;margin: 0}
 #app{
 width: 500px;height: 300px;margin: 0 auto;background-color: #ddd;
 .top{
 height: 50px;line-height: 50px;width: 100%;background-color: #999;
 .top ul li{display: inline-block;margin:0 10px;}
 .top ul li a{text-decoration: none;color: white;}
 .bottom{
 /style 
 /head 
 body 
 div id="app" 
 div 
 li a href="javascript:;" @click='tabToggle(tab01Text);' {{tab01Text}} /a /li 
 li a href="javascript:;" @click='tabToggle(tab02Text);' {{tab02Text}} /a /li 
 li a href="javascript:;" @click='tabToggle(tab03Text);' {{tab03Text}} /a /li 
 /ul 
 /div 
 div 
 component :is='currentView' keep-alive /component 
 /div 
 /div 
 script type="text/javascript" src='vue.js' /script 
 script 
 var tab01 = Vue.extend({
 template:' p This is tab01 /p '
 var tab02 = Vue.extend({
 template:' p This is tab02 /p '
 var tab03 = Vue.extend({
 template:' p This is tab03 /p '
 var app = new Vue({
 el:'#app',
 data:{
 tab01Text:'tab01',
 tab02Text:'tab02',
 tab03Text:'tab03',
 currentView:'tab01'
 components:{
 tab01:tab01,
 tab02:tab02,
 tab03:tab03
 methods:{
 tabToggle:function(tabText){
 this.currentView=tabText
 /script 
 /body 
 /html 

本文已被整理到了《》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


分享新闻到:

更多阅读

开发设计微信小程序_Vue.js组件tab完成选项

公司新闻 2021-01-12
Vue.js部件tab完成选择项卡转换 本文关键为大伙儿详尽详细介绍了Vue.js部件tab完成选择项...
查看全文

公众号关联小程序_用 js 的 selection range

公司新闻 2021-01-12
用 js 的 selection range 实际操作挑选地区內容和照片 先放上最终的实际效果,它是点一下...
查看全文

广州凡科互联网科技股份有限公司招聘创

公司新闻 2021-01-11
招聘人数:23职位信息岗位职责:1.根据客户项目计划要求,进行市场相关调研及可行性分析,...
查看全文
返回全部新闻


区域站点: 南丰县免费建站网站   南宫市网站建设网址   囊谦县自助网站建设系统   南和县建设官方网站   南华县免费建站网站   南江县网站建设网址   南京市自助网站建设系统   南靖县建设官方网站   南康市免费建站网站   南乐县网站建设网址   南陵县自助网站建设系统   南宁市建设官方网站   南平市免费建站网站   南皮县网站建设网址   南市区自助网站建设系统   南通市建设官方网站   南投县免费建站网站   南雄市网站建设网址   南溪县自助网站建设系统   南阳市建设官方网站   南漳县免费建站网站   南召县网站建设网址   南郑县自助网站建设系统   那坡县建设官方网站   那曲县免费建站网站   纳雍县网站建设网址   讷河市自助网站建设系统   内黄县建设官方网站   内江市免费建站网站   内丘县网站建设网址   内乡县自助网站建设系统   嫩江市建设官方网站   聂荣县免费建站网站   尼玛县网站建设网址   尼木县自助网站建设系统   宁安市建设官方网站   宁波市免费建站网站   宁城县网站建设网址   宁德市自助网站建设系统   宁都县建设官方网站   宁国市免费建站网站   宁海县网站建设网址   宁化县自助网站建设系统   宁晋县建设官方网站   宁陵县免费建站网站   宁明县网站建设网址   宁南县自助网站建设系统   宁强县建设官方网站   宁陕县免费建站网站   宁武县网站建设网址   宁乡市自助网站建设系统   宁阳县建设官方网站   宁远县免费建站网站   农安县网站建设网址   磐安县自助网站建设系统   盘锦市建设官方网站   盘山县免费建站网站   磐石市网站建设网址   盘州市自助网站建设系统   蓬安县建设官方网站   澎湖县免费建站网站   蓬莱市网站建设网址   彭山县自助网站建设系统   蓬溪县建设官方网站   彭阳县免费建站网站   彭泽县网站建设网址   彭州市自助网站建设系统   偏关县建设官方网站   平安县免费建站网站   平昌县网站建设网址   平定县自助网站建设系统   屏东县建设官方网站   平度市免费建站网站   平果县网站建设网址   平和县自助网站建设系统   平湖市建设官方网站   平江县免费建站网站   平乐县网站建设网址   平凉市自助网站建设系统   平利县建设官方网站   平罗县免费建站网站   平陆县网站建设网址   屏南县自助网站建设系统   平泉市建设官方网站   屏山县免费建站网站   平顺县网站建设网址   平塘县自助网站建设系统   平潭县建设官方网站   平武县免费建站网站   萍乡市网站建设网址   平乡县自助网站建设系统   平阳县建设官方网站   平遥县免费建站网站   平阴县网站建设网址   平邑县自助网站建设系统   平远县建设官方网站   平舆县免费建站网站   皮山县网站建设网址   普安县自助网站建设系统   浦北县建设官方网站   浦城县免费建站网站   普洱市网站建设网址   普格县自助网站建设系统   浦江县建设官方网站   普兰县免费建站网站   普宁市网站建设网址   莆田市自助网站建设系统   迁安市建设官方网站   乾安县免费建站网站   潜江市网站建设网址   潜山市自助网站建设系统  

友情链接: 企业建站系统 我的家乡网页设计 html网页设计代码作 手机网页设计 手机版

Copyright © 2002-2020 自助网站建设系统_建设官方网站_免费建站网站_网站建设网址_创建公众号 版权所有 (网站地图) 备案号:粤ICP备10235580号