【微信小程序 数据交互】

1、数据绑定

• 预览
  
• wxml

<view>
	<text>{{a}}</text>
</view>

• js

 data: {
    a:"hello word 你好张三"
  },

js修改后需要编译，才能在页面上看到，{{}}里边的内容起始很像 return __;

2、事件绑定

• 预览
  
• wxml

<button type="primary" bindtap="btnTapHandler">按钮	</button>

• js

	btnTapHandler(e) {
    	console.log(e);
  	},

3、数据赋值

• 预览
  
• wxml

<view>
	<text>这里展示的数字随点击变化<text user-select="">{{number}}</text></text>
	<button type="primary" plain bindtap="clickToUpdateData" size="default">点击+1</button>
</view>

• js

  /**
   * 页面的初始数据
   */
  data: {
    number: 0
  },

  clickToUpdateData(e) {
    console.log(this.data);
    this.setData({
      number: this.data.number + 1
    })
  },

4、事件传参

• 预览
  
• wxml

<view>
	<button type="warn" size="default" bindtap="setParam" data-info="{{'床前明月光，码农地上躺'}}">点击把值传入</button>
</view>
<view>传进来的值：<text style="color: red;">{{param}}</text></view>

• js

  data: {
    param: ""
  },
  setParam(e) {
    console.log(e.target);
    console.log(e.target.dataset.info);
    this.setData({
      param: e.target.dataset.info
    })
  },

5、bindinput输入框

• 预览
  

• wxml

<view>
	<view>
		这里输入的内容会在下边渲染
		<input type="text" bindinput="inputAndShow" />
	</view>
	<view>这是输入的内容:<text style="color: blue;">{{inputContent}}</text> </view>
</view>

• js

  data: {
    inputContent: ""
  },
  inputAndShow(e) {
    this.setData({
      inputContent: e.detail.value
    })
  },

6、输入框初始化绑定

• 预览
  
• wxml

<view>
	<input type="text" value="{{initContent}}" />
</view>

• js

 data: {
    initContent:"这是初始化的值"
  },

7、wx:if wx:elif wx:else

• 预览
  
• wxml

<view>
	<text>值：</text><text style="color: crimson;">{{numberValue}}</text>
	<button bindtap="updateNumberValue">点击+1,判断是否能被2或者3整除</button>
	<view wx:if="{{numberValue%2==0}}">值能被2整除</view>
	<view wx:elif="{{numberValue%3==0}}">值能被3整除</view>
	<view wx:else>不能被2或者3整除</view>
</view>

• js

  data: {
    numberValue: 0
  },
  updateNumberValue(e) {
    this.setData({
      numberValue: this.data.numberValue + 1
    })
  },

• 备注
  1、如果已经明确了某一个组件就是要进行判断显示，可以用block充当view，因为不会进行任何的渲染
  2、判断隐藏还可以使用hidden，条件是true隐藏，条件是false显示（hidden只是切换了隐藏的样式display:none/block，如果需要频繁判断切换，那么使用hidden）

<view hidden="{{true}}"> 上边代码写的真好</view>
<view hidden="{{false}}"> 上边代码写的真不好</view>

8、wx:for array遍历

• 预览
  
• wxml

<view>
	<view wx:for="{{forArrays}}">
		<view>{{index}}、{{item}}</view>
	</view>
</view>

• js

  data: {
    forArrays:["--京--","--津--","--冀--"]
  },

• 备注
  1、index还有item的名字可以指定

	<view wx:for="{{forArrays}}" wx:for-index="idx" wx:for-item="element">
		<view>{{idx}}、{{element}}</view>
	</view>

9、对象遍历

• 预览
  
• wxml

	<view>对象便利</view>
	<view wx:for="{{objectArrays}}" wx:for-index="idx" wx:key="id" wx:for-item="element">
		<view>{{element.id}}、{{element.name}}</view>
	</view>

• js

  data: {
    objectArrays:[{id:"7",name:"西南"},{id:"8",name:"西北"},{id:"9",name:"东进"}]
  }

• 备注：加wx:key 可以提高渲染效率