vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支。
首先美化一下界面 - 相关的界面代码不粘贴，可从我的 github 分支中看到。下面最终的实现效果图：
改造下 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 中学习指令和绑定 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
本篇文章给大家详细介绍了vue跨域处理问题的方式以及相关知识点介绍，对此有兴趣的朋友学习下。2018-02-02
这篇文章主要介绍了vue实现商城秒杀倒计时功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
nrm是一个npm源管理器,允许快速切换不同npm源,提高包管理效率,下面就来介绍一下VUE安装nrm管理多个npm源的方法示例,感兴趣的可以了解一下2025-01-01
这篇文章主要给大家介绍了在Vue组件化中利用axios处理ajax请求的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。2017-08-08
使用vue3中的pinia,我们可以在多个页面间共享数据,但是一旦我们关闭或刷新页面,这些数据就会丢失,因此,我们需要有一种数据持久化的解决方案,下面我们就来看看具体如何解决的吧2023-10-10
这篇文章主要介绍了使用Vue开发自己的Chrome扩展程序过程详解，浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序。它们可用于各种任务，例如阻止广告，管理密码，组织标签，改变网页的外观和行为等等。,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了记录vue做微信自定义分享的一些问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
相信大部分兄弟都体验过Vite了,都知道它很快,在学习的时候,官网上的各种配置也是看的眼花缭乱,不知道哪些是必要掌握的,下面这篇文章主要给大家介绍了关于Vite常见配置选项的相关资料,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了vue组件之间进行传值的方法，文章围绕主题展开详细的内容戒杀，具有一定的参考价值，需要的朋友可以参考一下2022-09-09
这篇文章主要介绍了Vue源码解析之数组变异的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
最新评论