指令

c-if

根据表达式的真假值条件渲染元素

  1.  <div c-if="{{true}}">根据c-if的真假结果决定是否渲染</div>

c-else

  • 不需要表达式;
  • 限制：前一个兄弟元素必须有 c-if 或者 c-else-if
    用法
  1. <div c-if="{{1 > 0.5}}">
  2.   Now you see me
  3. </div>
  4. <div c-else>
  5.   Now you don't
  6. </div>

c-else-if

  • 限制：前一个兄弟元素必须有 c-if 或者 c-else-if
  1. <div c-if="{{type === 'A'}}">
  2.   A
  3. </div>
  4. <div c-else-if="{{type === 'B'}}">
  5.   B
  6. </div>
  7. <div c-else-if="{{type === 'C'}}">
  8.   C
  9. </div>
  10. <div c-else>
  11.   Not A/B/C
  12. </div>

c-for

  1. <view c-for="{{array}}" c-for-index="idx" c-for-item="itemName">
  2.  <text> {{idx}}: {{itemName.message}}</text>
  3. </view>

c-model

父组件

  1. <view><text>c-model的使用</text></view>
  2. <input type="text" c-model="{{modelValueTest}}"/>
  3. <text>{{modelValueTest}}</text>
  5. <comp c-model="{{modelValueTest2}}" ></comp>
  6. <view><text>组件使其改变{{modelValueTest2}}</text></view>

子组件

  1. <template>
  2.   <view>
  3.     <input type="text" :value="value" c-bind:input="handleInput"/>
  4.   </view>    
  5. </template>
  7. <script>
  9. methods = {
  10.     handleInput(e){
  11.       console.log('input',e);
  12.       this.$cmlEmit('input', {
  13.         value:  Date.now()
  14.       })
  15.     }
  16.   }
  17. }
  18. </script>

$cmlEmit的事件名必须是 'input',传入的参数需要有一个更新的value作为key,其属性值作为新值进行更新；

c-text

  1. <view c-text="{{message}}"></view>

不支持组件的c-text

c-show

  1.   <view c-show="{{elementShow}}" >
  2.     <text>测试元素c-show</text>
  3.   </view>
  4.   <view><text>组件v-show</text></view>
  5.   <comp c-show="{{elementShow}}"></comp>

  • 使用c-show的元素不支持同时有 style 属性

  • elementShow是来自data或者computed中的key值,或者true/false

c-animation

传入的值必须由createAnimation返回

  1. <template>
  2.   <text c-animation="{{animationData}}" c-bind:click="click">hello world</text>
  3. </template>
  4. <script>
  5. import cml from 'cml目录';
  7. const animation = cml.createAnimation();
  9. class Index {
  10.   data = {
  11.     animationData: {}
  12.   }
  13.   methods = {
  14.     click: function() {
  15.       this.animationData = animation.opacity(0.1).step({}).export();
  16.     }
  17.   }
  18. };
  19. export default new Index();
  20. </script>