{3}uni-app和vuejs基础快速上手2

五、条件渲染

1.<template>

2.

3.v-if="isShow">

4.class="box">

5.                 box  

6.

7.

8.v-if="(age>20)">

9.class="box">

10.                 {{age}}  

11.

12.

13.type="default" @tap="changeShow()">显示/隐藏

14.type="default" @tap="changeAge()">年龄+

15.

16.

17.   

18.

六、列表渲染(key要求值不能相同)

1.<template>

2.

3.v-for="(item,ball) in ballList" :key="ball">

4.

5.                 {{ball}}-{{item}}  

6.

7.

8.v-for="(item1,per) in persion" :key="per">

9.

10.                 {{per}}-{{item1.name}}-{{item1.age}}  

11.

12.

13.v-for="(item2,index1) in address" :key="index1">

14.

15.                 {{item2.name}}  

16.

17.v-for="(item3,index2) in item2.list" :key="index2">

18.                 |--{{item3}}  

19.

20.

21.v-for="(item4,tt) in objList" :key="tt">

22.

23.                 {{item4}}  

24.

25.

26.

27.

28.   

29.

七、事件处理

1.

16.   

17.

防止内层事件触发外层方法，@tap.stop

1.<template>

2.

3.class="font">{{name}}

4.class="box" @tap="click()">

5.             按钮  

6.

7.class="box1" @tap.stop="box1click()">

8.             外面  

9.class="box2" @tap.stop="box2click()">

10.                 里面  

11.

12.

13.           

14.

15.

16.   

17.

八、监听属性

1.<template>

2.

3.class="font">{{age}}

4.class="box" @tap="click()">

5.             按钮  

6.

7.

8.

9.   

10.

九、计算属性

1.<template>

2.

3.class="font">{{ZHWeight}}

4.class="box" @tap="click()">

5.             按钮  

6.

7.

8.

9.   

10.