小程序开发—第四弹：WXML应用

for循环

<!--html-->
<block  wx:for="{{courses}}" wx:for-item="course" wx:key="index">
   <template is="course-card" data="{{course}}"/>
</block>

//javascript
courses:[
      {name:'人人都会小程序基础',
        img:'../../img/cover.png',
        price:'0'
      },
      {name:'小程序进阶',
        img:'../../img/cover.png',
        price:'119'
      },
]

数据双向绑定

通常在搜索框中需要对数据进行双向绑定，用户每输入一个数据，JS就能够得到响应，也能够调用相应的函数。

<input type="text" bindinput="setModelValue"  placeholder="请输入搜索内容" model:value="{{search_content}}"/>
<!--在value前加上model实现双向绑定-->
<!--双向绑定后，修改数据的同时，会自动调用bindinput的函数-->

Page({
  data: {
    search_content:"",
  },
  //每次输入数据都会输出数据的内容
  setModelValue:function(){
    console.log(this.data.search_content)
  },

结果如下图所示