指令

v-if

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

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

v-else

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

v-else-if

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

v-for

  1. <view v-for="(item,index) in array" >
  2.  <text> {{idx}}: {{itemName.message}}</text>
  3. </view>

v-model

父组件

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

子组件

  1. <template>
  2.   <view>
  3.     <input type="text" :value="value" @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>

v-text

  1. <view v-text="message"></view>

不支持组件的v-text

v-show

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

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

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