数据绑定

模板中绑定的数据来均来自于data、computed属性。

简单绑定

数据绑定使用 Mustache 语法（双大括号）, {{}}之内的可以是一些变量或者简单的表达式。

内容

<view> <text>{{ message }}</text> </view>

组件属性

<view id="item-{{id}}"> </view>

运算

<view hidden="{{flag ? true : false}}"> <text>Hidden </text> </view><view> <text>{{a + b}} + {{c}} + d </text></view><view c-if="{{length > 5}}"> </view>

  1. class Index {
  2.   data = {
  3.     a: 1,
  4.     b: 2,
  5.     c: 3,
  6.   }
  7. }
  8. export default new Index();

view中的内容为 3 + 3 + d

c-model

应用于表单元素

  1. <template>
  2.   <page title="chameleon">
  3.        <view><text>message:{{message}}</text></view>
  4.        <input c-model="{{message}}"></input>
  5.   </page>
  6. </template>
  7. <script>
  8. class Comp {
  9.   data = {
  10.      message:'default-value'
  11.   }
  12.   watch = {
  13.     message(){
  14.       console.log('modelTest change');
  15.     }
  16.   }
  17. }
  18. export default new Comp();
  19. </script>
  20. <script cml-type="json">
  21. {
  22.   "base": {}
  23. }
  24. </script>

c-model元素上不支持再绑定input事件，如果对于输入值变化之后想执行一些操作，可以通过 watch对应的值来进行；

应用于父子组件之间

父组件

  2. <template>
  3.   <page title="chameleon">
  4.     <scroller height="{{-1}}">
  5.       <view><text>c-model的在组件上的使用</text></view>
  6.       <comp c-model="{{modelValueTest2}}" ></comp>
  7.       <view><text>组件使其改变{{modelValueTest2}}</text></view>
  8.     </scroller>
  9.   </page>
  10. </template>
  12. <script>
  14. class Index  {
  15.   data = {
  16.     currentComp:'comp1',
  17.     modelValueTest2:'sss'
  18.   }
  19.   methods = {
  20.     handleClick(){
  21.       this.currentComp  = (this.currentComp === 'comp1' ) ? 'comp1':'comp2'
  22.     }
  23.   }
  24. }
  26. export default new Index();
  28. </script>
  29. <style>
  31. .scroller-wrap {
  32.   display: flex;
  33.   flex-direction: column;
  34.   align-items: center;
  35. }
  37. </style>
  38. <script cml-type="json">
  39. {
  40.   "base": {
  41.     "usingComponents": {
  42.       "comp1":"/components/comp1",
  43.       "comp2":"/components/comp2"
  44.     }
  45.   },
  46.   "wx": {
  47.     "navigationBarTitleText": "index",
  48.     "backgroundTextStyle": "dark",
  49.     "backgroundColor": "#E2E2E2"
  50.   },
  51.   "alipay": {
  52.     "defaultTitle": "index",
  53.     "pullRefresh": false,
  54.     "allowsBounceVertical": "YES",
  55.     "titleBarColor": "#ffffff"
  56.   },
  57.   "baidu": {
  58.     "navigationBarBackgroundColor": "#ffffff",
  59.     "navigationBarTextStyle": "white",
  60.     "navigationBarTitleText": "index",
  61.     "backgroundColor": "#ffffff",
  62.     "backgroundTextStyle": "dark",
  63.     "enablePullDownRefresh": false,
  64.     "onReachBottomDistance": 50
  65.   }
  66. }
  67. </script>

子组件

  2. <template>
  3.   <view>
  4.     <input type="text" value="{{value}}" c-bind:input="handleInput"/>
  5.   </view>    
  6. </template>
  8. <script>
  9. class Comp {
  10.   props = {
  11.     value:{
  12.       type:String,
  13.       default:'default-value'
  14.     }
  15.   }
  16.   methods = {
  17.     handleInput(e){
  18.       console.log('input',e);
  19.       this.$cmlEmit('input', {
  20.         value:e.detail.value
  21.       })
  22.     }
  23.   }
  24. }
  25. export default new Comp();
  26. </script>
  27. <script cml-type="json">
  28. {
  29.   "base": {}
  30. }
  31. </script>

Bug&Tips

注意 c-model的值只能是 data或者computed中的key值，不支持 modelValue.xxx 等需要二次计算的值；