微信小程序开发-自定义组件、数据获取方式、视图渲染(二)

data-*嵌入自定义数据

使用 data-* 属性来嵌入自定义数据。也就是说这个data-*是可以用来存储数据的，data-的后面跟着自定义的变量名，比如data-name、data-pwd等等，后面再赋值，这个值就会被存储起来。获取数据时通过js来实现。

  <!--data-id给button添加一个自定义属性id，值为3 -->
  <button data-id="3" catch:tap="fn">点击触发事件 </button>
  {
   {
   message}}

参数的获取方式
js中使用dataset.XXX获取标签中自定义属性值。

   // 点击按钮，通过dataset.xx获取传给button的id值
    console.log(e.currentTarget.dataset.id);

文件内数据获取方式
this.setData({属性名："属性值"})

    this.setData({
   
      // 点击按钮后，数据改变
      message: "我是修改后的数据",
      // 内容显示
      showInfo: !this.data.showInfo
    });

注意：

• 标签中的属性值XXX中不可以包含特殊字符（‘-’除外）。
• js中使用dataset.XXX获取标签中自定义属性值时，如果标签中的属性值XXX中包含字符‘-’，需要使用驼峰命名法定义变量名。

bindtap和catchtap绑定点击事件

bindtap和catchtap都可以绑定点击事件处理函数。

• bind事件绑定不会阻止冒泡事件向上冒泡，
• catch事件绑定可以阻止冒泡事件向上冒泡。
• catchtap和catch:tap是一样的效果

视图渲染

• wx:if与wx:else条件渲染
  wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
  注意： 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
• wx:for 列表渲染
  视图渲染

<view class="newsContainer">
  <view class="newsItem" wx:for="{
   {newsData}}" wx:key="item.id" data-newsId="{
   {item.id}}"