vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定


Posted in Javascript onSeptember 14, 2018

我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支。

首先美化一下界面 - 相关的界面代码不粘贴,可从我的 github 分支中看到。下面最终的实现效果图:

vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

改造下 data 中的 navs 属性 ( navs 数组每个元素都是 包含 active 和 data 属性的对象 ):

created: function () {
 fetch('https://www.apiopen.top/journalismApi')
  .then(v => v.json())
  .then(v => {
  this.tts = v.data.toutiao
  this.navs = v.data
  console.log(this.navs);
  Reflect.ownKeys(v.data).forEach((key, index) => {
   this.navs[key] = {
   active: key === 'toutiao',
   data: this.navs[key]
   }
  })
  })
 }

其中的 active 用来标识 button,data 是新闻资讯的数据。

改造 <div class="nav"> 标签:

<div class="nav">
  <div v-for="(value, key, index) in navs"
  :key="index"
  :class="{ active: value.active }"
  @click="changeNav(key)"
  >
  {{key}}
  </div>
</div>

其中加入 :class="{ active: value.active }" ,当前 button 是激活时,增加 .active。@click="changeNav(key)",当点击 button 执行组件中定义的 changeNav 函数,并传入 key 作为参数。

 methods: {
 changeNav: function(akey){
  Reflect.ownKeys(this.navs).forEach((key, index) => {
  this.navs[key].active = akey === key && (this.tts = this.navs[key].data);
  })
 }
 },

以上是组件中定义的 changeNav 方法。 代码中仅仅改变了 navs 数组中每个 avtive 的值,便可以切换 button 的选中状态;而 this.tts = this.navs[key].data 则是当 button 选中时替换组件 tts 属性指向的对象。

以上,介绍了方法定义、指令、class 绑定的内容,也介绍了如何动态的渲染和切换。

插值技术这里仅仅用到 {{ 组件属性 }} 的方式,还有很多其他的方式;计算属性是根据组件已有的属性,计算出来的“属性”,也不是高深的内容;事件处理仅介绍简单的函数执行,还有事件修饰符;这些内容请参阅 vue 官方教程学习。

关于条件渲染和列表渲染通过两篇文章的学习,应该掌握基本的用法。v-show 和 v-if 的区别也要注意 ( 性能上有差别 );列表渲染也有注意地方,还有列表过滤;这些内容请参阅 vue 官方教程学习。

总结

以上所述是小编给大家介绍的vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
原生js和jquery中有关透明度设置的相关问题
Jan 08 Javascript
js电话号码验证方法
Sep 28 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
npm配置国内镜像资源+淘宝镜像的方法
Sep 07 Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 14 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 #Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 #Javascript
node中的session的具体使用
Sep 14 #Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 #Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 #Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 #Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
Sep 14 #Javascript
You might like
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
js实现选项卡效果
2020/03/07 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
Python中处理时间的几种方法小结
2015/04/09 Python
Python httplib模块使用实例
2015/04/11 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
pyspark 随机森林的实现
2020/04/24 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
园长自我鉴定
2013/10/06 职场文书
夜大毕业自我鉴定
2013/10/11 职场文书
园艺师求职信
2014/03/10 职场文书
施工安全责任书
2014/04/14 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
2014年环保局工作总结
2014/12/11 职场文书
工程部岗位职责范本
2015/04/11 职场文书
未中标通知书
2015/04/17 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
2019各种承诺书范文
2019/06/24 职场文书