vue 3.0 CLI-2.3-组件之家中的学习指导和绑定

我的github地址-vue 3.0 study-将为所有阶段学习成果建立分支。

一、美化界面——相关的界面代码没有粘贴，但是可以从我的github分支看到。以下是最终实现效果图：

转换数据中的navs属性(navs数组的每个元素都是包含活动属性和数据属性的对象):

create d : function(){ fetch(' https://www . API open . top/Journalismpi ')。然后(v=v.json())。然后(v={ this . TTS=v . data . tout iao this . navs=v . data console . log(this . navs)；反思一下。ownkeys (v. data)。foreach((键，索引)={this。navs[key]={ active 3360 key==' tout iao '，data:this。navs [key]}}))，active用来识别按钮，而data就是新闻。

转换div class='nav '标记：

div class='nav' div v-for='(值，键，索引)在navs ' :键=' Index ' : class=' { active : value。active } ' @ click=' change nav(key)' { { key } }/div/div其中： class=' {active3360 value。添加了' active } '，当前按钮为@click='changeNav(key)'，当你点击按钮时，执行组件中定义的changeNav函数，并传入key作为参数。

methods: { changeNav:函数(akey){ reflect . own keys(this . navs))。forEach((键，索引)={ this . navs[键]。active=akey===key(this . TTS=this . navs[key]。数据)；})}}，以上就是组件中定义的changeNav方法。只需在代码中改变navs数组中每个avtive的值，就可以切换按钮的选中状态；还有这个. tts=这个. navs[key]。数据是选择按钮时替换组件的tts属性指向的对象。

上面介绍了方法定义、指令和类绑定的内容，以及如何动态呈现和切换。

插值技术只使用{{component attribute}}，还有很多其他方式；计算属性是根据组件现有属性计算的“属性”，不是高级内容；事件处理只引入简单的函数执行和事件修饰符；这些内容请参考官方vue教程。

条件渲染和列表渲染的基本用法要通过两篇文章的学习才能掌握。注意v-show和v-if的区别(性能差异)；列表渲染也有关注，还有列表过滤；这些内容请参考官方vue教程。

摘要

以上是边肖推出的vue 3.0 CLI-2.3-component home . vue中的学习指导和绑定。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！