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 相关文章推荐
一步一步教你写一个jQuery的插件教程(Plugin)
Sep 03 Javascript
让textarea自动调整大小的js代码
Apr 12 Javascript
JavaScript中的细节分析
Jun 30 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
12306验证码破解思路分享
Mar 25 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
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
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
PHP内置加密函数详解
2016/11/20 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
密码强度检测效果实现原理与代码
2013/01/04 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
Python中使用dom模块生成XML文件示例
2015/04/05 Python
Python赋值语句后逗号的作用分析
2015/06/08 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
浅谈python中的占位符
2017/11/09 Python
python的sorted用法详解
2019/06/25 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
电大自我鉴定
2013/10/27 职场文书
个人简历自我评价
2014/02/02 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP