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简易缓动插件(源码打包)
Feb 16 Javascript
JavaScript mapreduce工作原理简析
Nov 25 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
VUEX-action可以修改state吗
Nov 19 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 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
域名查询代码公布
2006/10/09 PHP
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
PHP session 会话处理函数
2016/06/06 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
js获取鼠标位置实例详解
2015/12/09 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
js仿360开机效果
2019/12/26 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
常用python数据类型转换函数总结
2014/03/11 Python
Python中运行并行任务技巧
2015/02/26 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
python如何更新包
2020/06/11 Python
为什么说python适合写爬虫
2020/06/11 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
Python try except else使用详解
2021/01/12 Python
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
自我鉴定200字
2013/10/28 职场文书
小型女装店的创业计划书
2014/01/09 职场文书
幼儿教师考核制度
2014/01/25 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
庆七一活动总结
2014/08/27 职场文书
2014年手术室工作总结
2014/11/26 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python