带你了解小程序_wx:key 在vue-CSDN博客

本文链接：https://blog.csdn.net/qq_50610527/article/details/129482674

文章介绍了小程序的数据绑定机制，包括动态属性绑定、内容绑定和三元运算。事件绑定被解释为渲染层与逻辑层的通信方式，重点讨论了事件对象的target和currentTarget。此外，文章还涉及如何重新赋值data、事件传参、条件渲染（wx:if和wx:elif/else）、组件显示隐藏（wx:if与hidden的区别）、列表渲染（wx:for和wx:key）以及小程序的常用单位rpx。最后提到了import导入在CSS和JS中的使用。

摘要由CSDN通过智能技术生成

小程序的数据绑定分为:

1.动态属性绑定。

2.动态内容绑定。

3.三元运算符的运算。

式例如下：

动态内容绑定。

动态属性绑定。

三元运算。

小程序中的事件绑定。

事件就是从渲染层到逻辑层的通讯方式。渲染层指的就是wxml。逻辑层指的就是js文件。

什么是事件对象呢？

事件对象就是当你触发事件对象的时候，他身上有一个event对象，我们将这个event对象叫做事件对象。它里面的东西我们可以通过console.log(e)打印它。

下面是它里面的属性以及作用。

标红的是我们开发用的最多的。

说说你对target和currentTarget的理解

target:指的是触发该事件的源头组件。target指的就是当前触发的按钮button。

currentTarget:指的是当前事件所绑定的组件。currentTarget指的就是当前的view。

如何给页面中的data重新进行赋值？

我们可以通过this.setDate({

要重新赋值的变量名:要重新赋的值

})来进行重新赋值。

小程序的事件传参

在vue中我们事件传参可以通过( 参数名 )小括号来进行参数的传递。但在小程序中行不通。在小程序中要进行参数的传递我们需要通过自定义属性传参。也就是data-*。其中 *代表的是参数的名字。

小程序事件绑定bindinput语法。

我们要拿取输入框的最新值，我们可以通过e.detail.value拿到输入框的最新值。

可以试试看能不能在输入框输入文本，实时同步在上面展示。

小程序中的条件渲染。

wx:if可以跟wx:elif、wx:else搭配来使用。

小程序如何将多个组件进行显示与隐藏

我们可以通过用block标签，将多个组件包起来，然后在block的身上进行条件渲染，让其在页面上展示还是隐藏。

请你说说hidden和wx:if的区别？

我所理解的wx:if他直接在页面上输出dom节点。而hidden的话，就相当于css中的display隐藏元素。在实际应用中，我们通常频繁切换组件的话，比较推荐使用hidden来进行元素的隐藏，如果使用wx:if的话，太消耗性能了。当控制条件复杂的时候，我们就可以用wx:if来实现。相对来说比较简单。

列表渲染wx:for以及wx:key

小程序中的wx:for就相当于vue中的v-for，他们都是通过循环遍历的方式，来渲染数据到页面上的。唯一不同的是使用方法。小程序的话循环遍历完，我们需要通过itme.属性名来使用对象里面对应的值。而vue的话则是通过定义的变量名.属性名来使用对应的值。wx:key他的作用跟vue中的:key的作用一样，都是为了提高渲染性能的。