v-if 调节渲染

  1. <template>
  2.     <view >
  3.         <view class="text-area">
  4.             <text class="title">{{title}}</text>
  5.             <view v-if="num>5">uni-app</view>
  6.             <view v-else>vuejs</view>
  7.         </view>
  8.     </view>
  9. </template>
  10. <script>
  11.     export default {
  12.         data() {
  13.             return {
  14.                 title: 'Hello',
  15.                 num:4
  16.             }
  17.         },
  18.         methods: {
  19.         }
  20.     }
  21. </script>
  23. <style>
  24. </style>

v-for

  1. <template>
  2.     <view>
  3.         <view class="text-area">
  4.             <view v-for="(item,index1) in 3" :key="index1">
  5.                 uni-app{{item}}--{{index1}}
  6.             </view>
  7.         </view>
  8.         <view v-for="(item,index) in items2" :key="index">
  9.             {{item.name}}--{{index}}
  10.         </view>
  11.     </view>
  12. </template>
  13. <script>
  14.     export default {
  15.         data() {
  16.             return {
  17.                 title: 'Hello',
  18.                 num: 4,
  19.                 items2: [{
  20.                         name: 'uni-app'
  21.                     },
  22.                     {
  23.                         name: 'html'
  24.                     },
  25.                     {
  26.                         name: 'js'
  27.                     },
  28.                     {
  29.                         name: 'css'
  30.                     }
  31.                 ]
  32.             }
  33.         },
  34.         methods: {}
  35.     }
  36. </script>
  38. <style>
  39. </style>

事件

v-on