小程序(数据绑定,修改data值,数据遍历,双层数据遍历,模板,条件渲染)

1.数据绑定

1.在.wxml文件中写入

<view>{{msg}}</view>

 2.在js文件中写入

  data: {
    msg: '你好，世界'
  },

3.运行后显示结果 

 2.通过点击事件修改data值

1.在wxml文件中写入

<view>{{msg}}</view>
<button bindtap="tapFn">按钮</button>

2.在js文件中

 Page({
 tapFn(){
// 使用dthis.setData({键:值})修改data中的数据
    this.setData({
      msg: '我是点击按钮后修改后的值'
    })
  },
})

 3.通过双向数据绑定修改data中的值

1.wxml文件中

<input value="{{msg}}" bindinput="iptFn"></input>
<view>{{msg}}</view>

2. js文件中

  // input值被修改时触发的函数
  iptFn(e){
    console.log(e);
    this.setData({
      msg: e.detail.value
    })
  },

4.数据遍历(循环)

1.在wxml文件中 

<!-- 方法1 -->
<view class="box">
    <view wx:for="{{arr}}" wx:key="*this">{{item}}</view>
</view>

<!-- 方法2 -->
<view class="box">
    <block wx:for="{{arr}}" wx:key="*this">
      <view>{{item}}</view>
    </block>
</view>

2.在js文件中

  data: {

    arr: ['张三', '李四', '王五']

  },

5.双层for循环数据遍历&&修改item的名

1.wxml

<!--pages/homework/work.wxml-->
<block wx:for="{{arr}}" wx:key='*this'>
  <view>
    <view>{{item.grout}}</view>
    <!-- 换行显示的 -->
    <view wx:for="{{item.chengyuan}}" wx:key='*this'>
      <text>{{item}}</text>
    </view>
  </view>
</block>

<view class="fengexian">---------------</view>


<!-- 可使用 wx:for-item="items" 将item名称改为items -->
<block wx:for="{{arr}}" wx:key='*this' wx:for-item="items">
  <view>
    <view>{{item.grout}}</view>
    <!-- 不换行显示的 -->

    <!-- 嵌套的循环可使用items进行遍历 -->
    <text wx:for="{{items.chengyuan}}" wx:key='*this'>
      <text>{{item}},</text>
    </text>
  </view>
</block>

 2.js文件中

  data: {
    msg: '你好，世界',

    arr: [{
      grout: '第一组',
      chengyuan: ['李白', '王哈哈', '刘禹锡']
    },
    {
      grout: '第二组',
      chengyuan: ['李白', '王哈哈', '刘禹锡']
    },
    {
      grout: '第三组',
      chengyuan: ['李白', '王哈哈', '刘禹锡']
    }
  ]

  },

 3.运行结果

6.条件渲染 wx:if=true  

1.wxml文件

<view wx:if="{{condition}}"> True </view>



<view wx:if="{{length > 5}}"> 1 </view>																					
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

2. js文件中

 data: {
   condition:true,
   length:4
  },

 7.条件渲染 hidden="{false}}"

1.wxml文件

<view hidden="{{ifShow}}">显示或隐藏</view> 
<view hidden="{{!ifShow}}">我的值是true所以不显示</view> 

 2.js文件]

  data: {
    ifShow: false	
    // 由于hidden代表一种否定（或称：取反），
    // 所以这里为false，上面的view标签才能显示
  },

8.模板的创建与应用( 可传值的)

1.创建模板

在于wxml同级的文件夹中新建一个templates文件夹,在此文件夹中新建一个item.wxml文件

2.应用模板

在wxml中进行引入,并使用

wxml文件

<import src="./templates/item.wxml" />
<template is="box1" data='{{srcs}}'></template>



<view>-------------</view>



<template is="box2" data="{{content: txt}}"></template>

js文件

  data: {
    srcs: '你好呀',
    txt: '我是文字内容'
  },

 templates--item.wxml

<template name="box1">
<!-- 组件无法获取data中的数据 -->
  <text bindtap="txtFn">box1: {{src}}</text>
</template>




<template name="box2">
  <text bindtap="txtFn">box2: {{content}}</text>
</template>

 9.模板的创建与应用( 不可传值的)

template--box1.wxml文件 模板创建

<view>我是box1</view>

 template--box2.wxml文件

<view>我是box2</view>

wxml(引用)

<include src="./templates/box1" />

<view>---------------------</view>
<view>上面是box1模板，下面是box2模板</view>
<view>----------------------</view>

<include src="./templates/box2" />

10.WXS模块(外联式)

1.模板创建

 新建一个和wxml文件同级的 文件 test.wxs文件

function my_slice(str,a,b){
  return str.slice(a,b);
}

// 将方法开发出去
module.exports = {
  my_slice: my_slice
}

 wxml文件中

<!-- 引入.wxs文件 并给该模块声明一个名称 -->
<wxs src="./test.wxs" module="tools" />
<view>

<!-- 通过模块名称.方法名调用.wxs文件中的方法 -->
  {{tools.my_slice("123456789",0,5)}}
</view>

11.WXS模块(内嵌式)

<!-- 在wxml文件中使用wxs创建模块,并命名为tools -->
<wxs module="tools">
  function add(a, b){
    var sum = a + b;
    return sum;
  }
  module.exports = {
    // 这里开放方法不能简写为add
    add: add
  };
</wxs>

<!-- 使用wxs中的方法 -->
<view>
  {{tools.add(3, 4)}}
</view>

12.输出data中的数据

 console.log(this.data.banners);