Vue--项目开发之实现tabbar功能来学习单文件组件2
上一篇文章里item.vue里的span标签内容是写死了,但是我们不希望写死
所以对于五个tab选项的标题需要从外部传入,也就说
需要在item.vue里的script里写上
export default {
props:['txt']
}
这里我定义了txt作为外部接收标题的标志
然后在span标签里写
<span>{{txt}}</span> 再接着:去到helloworld.vue文件里可以将div改写如下:
<div class="tabbar">
<item txt="首页"></item>
<item txt="分类"></item>
<item txt="发现"></item>
<item txt="购物车"></item>
<item txt="我的考拉"></item>
</div>
这样就可以通过父组件传递txt内容到子组件item文件里了 然后我们还要将选项对应的图片也有外部传递不写死
<span v-show="bol"><slot name="normalimg"></slot><br/></span>
<span v-show="!bol"><slot name="activeimg"></slot><br/></span>
在item.vue里的div里写上两个具名槽口,这样方便父组件里传递点击和未点击的两种图片
接着就是通过v-show指令来控制显隐两种图片,bol参数需要在script里定义
export default {
props:['txt'],
data:function () {
return{
bol:false
}
}
}
最后在父组件里就要调用槽口来传递图片了
<div class="tabbar">
<item txt="首页">
<img src="../assets/img/hot5.gif" alt="" slot="normalimg"/><br/>
<img src="../assets/img/hot6.gif" alt="" slot="activeimg"/><br/>
</item>
<item txt="分类">
<img src="../assets/img/hot5.gif" alt="" slot="normalimg"/><br/>
<img src="../assets/img/hot6.gif" alt="" slot="activeimg"/><br/>
</item>
<item txt="发现">
<img src="../assets/img/hot5.gif" alt="" slot="normalimg"/><br/>
<img src="../assets/img/hot6.gif" alt="" slot="activeimg"/><br/>
</item>
<item txt="购物车">
<img src="../assets/img/hot5.gif" alt="" slot="normalimg"/><br/>
<img src="../assets/img/hot6.gif" alt="" slot="activeimg"/><br/>
</item>
<item txt="我的考拉">
<img src="../assets/img/hot5.gif" alt="" slot="normalimg"/><br/>
<img src="../assets/img/hot6.gif" alt="" slot="activeimg"/><br/>
</item>
</div>
Vue--项目开发之实现tabbar功能来学习单文件组件2的更多相关文章
- Vue--项目开发之实现tabbar功能来学习单文件组件1
创建好一个Vue项目后,我们进入项目里,点开src文件下的components文件里的helloworld.vue 文件.清空初始数据.然后开始编写. 一个.vue文件初始格式为以下三部分(组件三部曲 ...
- webpack搭建vue项目开发环境【文档向学习】
为何有这篇文章 各个社区已经有无数篇帖子介绍如何使用webpack搭建前端项目,但无论是出于学习webpack的目的还是为了解决工作实际需要都面临着一个现实问题,那就是版本更新.别人的帖子可能刚写好版 ...
- Vue项目开发相关问题总结
Vue项目开发相关问题总结 一.创建一个项目(两种方式) 1.通过CLI命令行创建,具体步骤如下: (1)Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11 ...
- Vue 项目开发
目录 Vue 项目开发 项目目录结构解析 入口文件 main.js (项目入口) 根组件 app.vue index.html 文件入口 router 路由 components 子组件 项目初始化 ...
- Vue项目开发最新、最全代码规范文档
Vue项目开发最新.最全代码规范文档 2019年02月21日 10:43:49 yw00yw 阅读数 337 一. 目录结构 |— build 构建脚本目录 |— build.js 生产环境构建( ...
- Vue项目中添加锁屏功能
0. 直接上 预览链接 Vue项目中添加锁屏功能 1. 实现思路 ( 1 ) 设置锁屏密码 ( 2 ) 密码存localStorage (本项目已经封装h5的sessionStorage和localS ...
- vue第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期)
第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期) #课程目标 掌握安装 vue-cli 命令行工具的方法,掌握使用命令行在本地搭建开发环境,使用命令行 ...
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- Vue单文件组件
前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...
随机推荐
- 幂率定律及绘制Power-law函数
来自:Eastmount 在我们日常生活中Power Law(幂次分布,Power-law Distributions)是常见的一个数学模型,如二八原则.这个世界上是20%的人掌握80%的人的金钱去经 ...
- [原][粒子特效][spark]深入浅出osgSpark
背景: 目前我使用的spark粒子特效库是2.0 这个库好像是原来鬼火引擎的一部分,需要从github上找 现在我要将其使用到我自己开发的基于osgearth开的三维地图引擎中 步骤: 1.编译spa ...
- python IOError: [Errno 22] invalid mode ('r') or filename:
如果你是报这个错误,可能是因为你的文件路径中的中文字符太多的缘故. 你可以将路径或者文件名称改为英文试试.
- indexOf includes 区别
indexOf 返回数值类型 ( 索引.-1 ) includes 返回布尔类型 ( true .false ),且能区分出 NaN undefined ( 如新建空数组 ...
- 虹软人脸识别SDK的接入方法
背景: 虹软的人脸识别还是不错的,在官方注册一个账号,成为开发者,下载SDK的jar包,在开发者中心,找一个demo就可以开始做了,安装里边的逻辑,先看理解代码,然后就可以控制代码,完成自己想要的功能 ...
- MySQL学习(四)
1 MySQL日期和时间类型 创建一个包含DATE类型的表 mysql> create table test3( -> star varchar(20) not null default ...
- css动效库animate.css和swiper.js
animate.css https://daneden.github.io/animate.css/ 学习的文档:http://www.jq22.com/jquery-info819 腾讯团队的JXa ...
- Linux 各种软件的安装-Apache + php 篇
mysql装好了,三剑客还差两个 apache就简单多了. yum -y install httpd # 删除默认欢迎页面 rm -f /etc/httpd/conf.d/welcome.conf s ...
- OPSF - 2,状态机
1,报文更新地址 点到点:所有报文发送224.0.0.5 虚链路:单播地址 广播网络上:DR OTHER至DR/BDR 224.0.0.6,DR/BDR至DR OTEHER 2 ...
- Building designing UVA - 11039
先取正的和负的绝对值较小者为开头 .然后交替从正负数中取绝对值最小但比上一个大的. 证明: 1.开头选正负数中绝对值较小的:否则能再多放1个. 2.交替选的时候选最小的符合条件的:如果大的符合,换小的 ...