数据绑定

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

模板语法

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

内容

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

组件属性

<view :id="dynamicId"> </view>或者 v-bindview v-bind:id="dynamicId"

v-model

应用于表单元素

  1. <template lang='vue'>
  2.   <page title="chameleon">
  3.        <view><text>message:{{message}}</text></view>
  4.        <input v-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>

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

应用于父子组件之间

父组件

  2. <template lang='vue'>
  3.   <page title="chameleon">
  4.     <view><text>c-model的在组件上的使用</text></view>
  5.     <comp v-model="modelValueTest2" ></comp>
  6.     <view><text>组件使其改变{{modelValueTest2}}</text></view>
  7.   </page>
  8. </template>
  10. <script>
  12. class Index  {
  13.   data = {
  14.     currentComp:'comp1',
  15.     modelValueTest2:'sss'
  16.   }
  17.   methods = {
  18.     handleClick(){
  19.       this.currentComp  = (this.currentComp === 'comp1' ) ? 'comp1':'comp2'
  20.     }
  21.   }
  22. }
  24. export default new Index();
  26. </script>
  27. <style>
  29. .scroller-wrap {
  30.   display: flex;
  31.   flex-direction: column;
  32.   align-items: center;
  33. }
  35. </style>
  36. <script cml-type="json">
  37. {
  38.   "base": {
  39.     "usingComponents": {
  40.       "comp1":"/components/comp1",
  41.       "comp2":"/components/comp2"
  42.     }
  43.   }
  44. }
  45. </script>

子组件

  2. <template lang='vue'>
  3.   <view>
  4.     <input type="text" :value="value" v-on: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.       debugger;
  20.       this.$cmlEmit('input', {
  21.         value:e.detail.value
  22.       })
  23.     }
  24.   }
  25. }
  26. export default new Comp();
  27. </script>
  28. <script cml-type="json">
  29. {
  30.   "base": {}
  31. }
  32. </script>

Javascript表达式

在模板内容中

  1. {{ number + 1 }}
  3. {{ ok ? 'YES' : 'NO' }}
  5. {{ message.split('').reverse().join('') }}

算数运算

<view> <text>{{a + b}} + {{c}} + d </text></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。

字符串运算

<view><text>{{"hello" + name}}</text></view>

特别注意：模板中的字符串都要使用双引号，不能使用单引号。

数据路径运算

<view><text>{{object.key}} {{array[0]}}</text></view>

  1. class Index {
  2.   data = {
  3.     object: {
  4.       key: 'Hello '
  5.     },
  6.     array: ['MINA']
  7.   }
  8. }
  9. export default new Index();

Bug & Tip

  • 使用component语法的时候，为了提高微信端的渲染效率，建议加上shrinkComponents = "comp1,comp2,…",缩小动态渲染的查找范围，减少不必要的渲染开销；

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