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 相关文章推荐
JavaScript CSS修改学习第六章 拖拽
Feb 19 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
js 求时间差的实现代码
Apr 26 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
React 组件间的通信示例
Jun 14 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
JavaScript实例 ODO List分析
Jan 22 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创建者模式
2014/11/25 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
php7下的filesize函数
2019/09/30 PHP
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
Python笔记(叁)继续学习
2012/10/24 Python
python 将字符串转换成字典dict
2013/03/24 Python
浅析Python3爬虫登录模拟
2018/02/07 Python
python format 格式化输出方法
2018/07/16 Python
详解Python做一个名片管理系统
2019/03/14 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
《月迹》教学反思
2014/02/19 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
教师求职自荐信范文
2015/03/04 职场文书
Django模型层实现多表关系创建和多表操作
2021/07/21 Python