小程序数据绑定（第二部分）

2、页面配置，.json

页面是局部配置，会对window中的全局配置进行覆盖，有局部走局部，没有局部走全局

{
  "usingComponents": {},
  "navigationBarTitleText": "index页",
  "navigationBarTextStyle": "white"
}

5、小程序数据绑定

页面的.vxml文件和html文件一致，跟vue中用法一样，用{{ }} 引用js数据中的data数据

页面的.js文件

// pages/test/test.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    "num":10,
    "num2":100,
    "msg":"Mr沈",
    "name":"zack",
    "id":"vicky",
    "b": false,
    "name_list":[{"name":"zack", hobby:"study"},{name:"vicky", hobby:"play"}]
  },

页面的.vxml文件

1页面引用js的数据是用{{}}，也可以用作属性值

<view id="item-{{msg}}">ttt {{ msg }}</view>
<view>my age {{num}}</view>

2 如果都是字符串，{{name + msg}}，就是拼接
<view>{{name + msg}}</view>

3 如果一个是字符串一个是数字也是拼接
<view>{{name + num}}</view>
<view>{{num1 + num}}</view>

4 就想做+号分开写
<view>{{num1}} + {{num}}</view>

5 在页面中如果属性想表达布尔值，一定要加{{}}，当然也可以直接使用变量{{布尔值变量}}
<checkbox checked = "{{ture}}"></checkbox>
<checkbox checked = "{{b}}"></checkbox>

条件成立时显示
<view wx:if = "{{num>1}}">显示</view>


6 循环默认是用index -> 取键，item -> 取值，
用wx:for-index --> 来修改取键的index
用wx:for-item --> 来修改取值的item
一般都要加上wx:key ="index"来提高遍历的速度
如果只想输出内容没不想要包裹的标签，用<block>标签做承载标签
<view wx:for="{{name_list}}" wx:key="index">{{index}}===>{{item.name}}/{{item.hobby}}</view>

<view wx:for="{{name_list}}" wx:for-index="k" wx:for-item="v" wx:key="index1">{{k}}:{{v.name}}/{{v.hobby}}</view>


<block wx:for="{{name_list}}" wx:key="index">{{index}}===>{{item.name}}/{{item.hobby}}</block>

CSDN程序员寄语
1、作为一个真正的程序员，首先应该尊重编程，热爱你所写下的程序，他是你的伙伴，而不是工具。
2、程序员可以让步，却不可以退缩，可以羞涩，却不可以软弱，总之，程序员必须是勇敢的。
3、编程是一种单调的生活，因此程序员比普通人需要更多的关怀，更多的友情。
4、程序不是年轻的专利，但是，他属于年轻。
5、没有情调，不懂浪漫，也许这是程序员的一面，但拥有朴实无华的爱是他们的另一面。
6、一个好汉三个帮，程序员同样如此。
7、一个100行的代码调试都可能会让程序员遇到很多挫折，所以，面对挫折，我们永远不能低头。
8、调试完一个动态连接函数，固然值得兴奋，但真正的成功远还在无数个函数之后。
9、程序是我的生命，但我相信爱她甚过爱我的生命。
10、信念和目标，必须永远洋溢在程序员内心