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 中学习指令和绑定 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
浅谈Vue3 Composition API如何替换Vue Mixins
这篇文章主要介绍了浅谈Vue3 Composition API如何替换Vue Mixins，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了vue 鼠标移入移出(hover)切换显示图片问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue3+vite 动态引用静态资源及动态引入assets文件夹图片的多种方式
通过require动态引入, 发现报错：require is not defind,这是因为 require 是属于 Webpack 的方法,本文给大家介绍vue3+vite 动态引用静态资源及动态引入assets文件夹图片的多种方式,感兴趣的朋友一起看看吧2023-10-10
侦听器和计算属性都可以用于侦听响应式数据的变化,如果需要在数据变化后执行操作,修改依赖项,那么就应该使用侦听器,下面就跟随小编一起来学习一下vue3中侦听器的使用吧2023-09-09
这篇文章主要介绍了Vue中对组件二开解决思路以及方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-04-04
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
这篇文章主要介绍了vue + any-touch实现一个iscroll实现拖拽和滑动动画效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了vue如何将v-for中的表格导出来,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了在vue中根据光标的显示与消失实现下拉列表，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
Vue路由回退的完美解决方案（vue-route-manager）
最近做了一个vue项目关于路由场景的问题,路由如何回退指定页面,在此做个记录,这篇文章主要给大家介绍了关于Vue路由回退的完美解决方案,主要利用的是vue-route-manager,需要的朋友可以参考下2021-09-09
这篇文章主要为大家详细介绍了如何使用Vue3实现一个简单的输入框,可以实现输入文字,添加表情等功能,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
最新评论