uni-app组件知识记录

目录

• style标签的lang
  
• 视图容器
  
  
  
  • 组件scroll-view的使用(滚动)
    
  • 组件swiper的使用(轮播)
    
  
  
• 媒体组件
  
  
  
  • 组件image的使用(图片)
    
  
  
• 路由与页面跳转
  
  
  
  • navigator
    
  • tabBar底部导航配置
    
  
  
• 表单提交
  
• 组件
  
  
  
  • 动态赋值子组件的属性字段props
    
  
  
• VUE语法
  
  
  
  • data 属性
    
  • 指令
    
    
    
    • v-if/v-else
      
    • v-show
      
    • v-for循环
      
    • v-html标签
      
    • v-bind动态绑定
      
    • v-on 指令
      
    • class与style绑定
      
    • 导航栏高亮显示
      
    • v-model双向绑定
      
    • v-model示例
      
    
    
  • 计算属性和侦听器
    
    
    
    • 计算属性computed
      
    
    
  • 子组件触发自定义事件传递给父组件
    
  • 将原生事件绑定到组件
    
  • 子组件向上传值案例
    
    
    
    • .sync 修饰符
      
    
    
  
  
• vue的生命周期
  
  
  
  • App.vue中的方法
    
  
  
• API使用
  
  
  
  • 路由跳转页面
    
    
    
    • 携带参数跳转页面传参
      
    
    
  
  
• 界面
  
  
  
  • 下方弹出菜单
    
  • 设置导航条
    
  • 设置TabBar
    
    
    
    • 使用iconfont图标
      
    • 动态设置 tabBar 某一项的内容
      
    • 为 tabBar 某一项的右上角添加文本。
      
    
    
  
  
• 网络
  
  
  
  • 发起请求
    
  • 新闻文章案例
    
  
  
• 问题
  
  
  
  • 图片遮住其他内容
    
  • vue中返回false场景
    
  • 接口QPS小，频繁请求导致500的问题
    
  
  
• 开发新闻应用
  

style标签的lang

1. <template>
2. <view>
3. <view  v-for="index in 3">
4.         <image :src="image"></image>
5. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
6. </view><view >
7. <view>
8. <view  v-for="index in 3">
9.         <image :src="image"></image>
10. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
11. </view><view>
12. <view  v-for="index in 3">
13.         <image :src="image"></image>
14. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
15. </view><h1 >我</h1>是谁
16. <view>
17. <view  v-for="index in 3">
18.         <image :src="image"></image>
19. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
20. </view></view>
21. </template>

复制代码

1. [/code]scss是css样式增强版定义
2. 样式中可以嵌套，标签或者class定义
3. [align=center] [/align]
4. [size=6]视图容器[/size]
6. [size=5]组件scroll-view的使用(滚动)[/size]
8. [code]<template>
9. <view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view><view >
14. <view>
15. <view  v-for="index in 3">
16.         <image :src="image"></image>
17. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
18. </view><view>
19. <view  v-for="index in 3">
20.         <image :src="image"></image>
21. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
22. </view>
23. <view>
24. <view  v-for="index in 3">
25.         <image :src="image"></image>
26. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
27. </view><view>
28. <view  v-for="index in 3">
29.         <image :src="image"></image>
30. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
31. </view><scroll-view  scroll-x="true">
32. <view>
33. <view  v-for="index in 3">
34.         <image :src="image"></image>
35. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
36. </view><view>
37. <view  v-for="index in 3">
38.         <image :src="image"></image>
39. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
40. </view><view>
41. <view  v-for="index in 3">
42.         <image :src="image"></image>
43. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
44. </view><image  src="../../static/img/小猫测试.jpeg">
45. <view>
46. <view  v-for="index in 3">
47.         <image :src="image"></image>
48. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
49. </view><view>
50. <view  v-for="index in 3">
51.         <image :src="image"></image>
52. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
53. </view><view>
54. <view  v-for="index in 3">
55.         <image :src="image"></image>
56. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
57. </view></image>
58. <view>
59. <view  v-for="index in 3">
60.         <image :src="image"></image>
61. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
62. </view><view>
63. <view  v-for="index in 3">
64.         <image :src="image"></image>
65. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
66. </view><view>
67. <view  v-for="index in 3">
68.         <image :src="image"></image>
69. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
70. </view><image  src="../../static/img/小猫测试.jpeg">
71. <view>
72. <view  v-for="index in 3">
73.         <image :src="image"></image>
74. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
75. </view><view>
76. <view  v-for="index in 3">
77.         <image :src="image"></image>
78. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
79. </view><view>
80. <view  v-for="index in 3">
81.         <image :src="image"></image>
82. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
83. </view></image>
84. <view>
85. <view  v-for="index in 3">
86.         <image :src="image"></image>
87. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
88. </view><view>
89. <view  v-for="index in 3">
90.         <image :src="image"></image>
91. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
92. </view><view>
93. <view  v-for="index in 3">
94.         <image :src="image"></image>
95. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
96. </view><image  src="../../static/img/小猫测试.jpeg">
97. <view>
98. <view  v-for="index in 3">
99.         <image :src="image"></image>
100. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
101. </view><view>
102. <view  v-for="index in 3">
103.         <image :src="image"></image>
104. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
105. </view><view>
106. <view  v-for="index in 3">
107.         <image :src="image"></image>
108. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
109. </view></image>
110. <view>
111. <view  v-for="index in 3">
112.         <image :src="image"></image>
113. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
114. </view><view>
115. <view  v-for="index in 3">
116.         <image :src="image"></image>
117. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
118. </view></scroll-view>
119. <view>
120. <view  v-for="index in 3">
121.         <image :src="image"></image>
122. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
123. </view></view>
124. </template>

复制代码

1. [/code][align=center] [/align]
2. [size=5]组件swiper的使用(轮播)[/size]
4. [code]<swiper indicator-dots >
5. <view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view><swiper-item>
10. <view>
11. <view  v-for="index in 3">
12.         <image :src="image"></image>
13. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
14. </view><view>
15. <view  v-for="index in 3">
16.         <image :src="image"></image>
17. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
18. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
19. <view>
20. <view  v-for="index in 3">
21.         <image :src="image"></image>
22. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
23. </view></swiper-item>
24. <view>
25. <view  v-for="index in 3">
26.         <image :src="image"></image>
27. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
28. </view><swiper-item>
29. <view>
30. <view  v-for="index in 3">
31.         <image :src="image"></image>
32. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
33. </view><view>
34. <view  v-for="index in 3">
35.         <image :src="image"></image>
36. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
37. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
38. <view>
39. <view  v-for="index in 3">
40.         <image :src="image"></image>
41. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
42. </view></swiper-item>
43. <view>
44. <view  v-for="index in 3">
45.         <image :src="image"></image>
46. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
47. </view><swiper-item>
48. <view>
49. <view  v-for="index in 3">
50.         <image :src="image"></image>
51. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
52. </view><view>
53. <view  v-for="index in 3">
54.         <image :src="image"></image>
55. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
56. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
57. <view>
58. <view  v-for="index in 3">
59.         <image :src="image"></image>
60. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
61. </view></swiper-item>
62. </swiper>

复制代码

1. .swiper {
2. <view>
3. <view  v-for="index in 3">
4.         <image :src="image"></image>
5. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
6. </view>height: 300rpx;
7. <view>
8. <view  v-for="index in 3">
9.         <image :src="image"></image>
10. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
11. </view>.swiper-image {
12. <view>
13. <view  v-for="index in 3">
14.         <image :src="image"></image>
15. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
16. </view><view>
17. <view  v-for="index in 3">
18.         <image :src="image"></image>
19. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
20. </view>height: 300rpx;
21. <view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view><view>
26. <view  v-for="index in 3">
27.         <image :src="image"></image>
28. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
29. </view>width: 750rpx;
30. <view>
31. <view  v-for="index in 3">
32.         <image :src="image"></image>
33. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
34. </view>}
35. }

复制代码

媒体组件

组件image的使用(图片)

1. <view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>

复制代码

aspectFill: 始终保持宽或者高全部展示
当容器image的宽度小于图片宽度时，图片高度完全展示，当容器image的高度小于图片高度时，图片宽度完全展示
图片: 320px 240px

1. .image-t {<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>width: 200px;<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view>// height: 300px;}

复制代码

路由与页面跳转

navigator

1. <navigator url="/pages/list/list">跳转到list页面(保留历史页面，左上角有返回按钮)</navigator>
2. <navigator url="/pages/list/list" open-type="redirect">跳转到list页面，打开新页面，左上角没有返回按钮</navigator>

复制代码

navigate: 保留历史页面，可以跳转到非 tabBar 的页面的路径
redirect: 不保留历史页面打开新页面，不可跳转到非tabBar页面路径
switchTab: url不能携带参数
reLaunch: url可以携带参数，可以跳转到非 tabBar 的页面的路径但不能带参数
tabBar底部导航配置

1. {<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>"tabBar": {<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view><view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view>"color": "#7A7E83",<view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view><view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view>"selectedColor": "#3cc51f",<view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view><view>
26. <view  v-for="index in 3">
27.         <image :src="image"></image>
28. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
29. </view>"borderStyle": "black",<view>
30. <view  v-for="index in 3">
31.         <image :src="image"></image>
32. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
33. </view><view>
34. <view  v-for="index in 3">
35.         <image :src="image"></image>
36. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
37. </view>"backgroundColor": "#ffffff",<view>
38. <view  v-for="index in 3">
39.         <image :src="image"></image>
40. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
41. </view><view>
42. <view  v-for="index in 3">
43.         <image :src="image"></image>
44. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
45. </view>"list": [{<view>
46. <view  v-for="index in 3">
47.         <image :src="image"></image>
48. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
49. </view><view>
50. <view  v-for="index in 3">
51.         <image :src="image"></image>
52. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
53. </view><view>
54. <view  v-for="index in 3">
55.         <image :src="image"></image>
56. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
57. </view><view>
58. <view  v-for="index in 3">
59.         <image :src="image"></image>
60. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
61. </view>"pagePath": "pages/index/index",<view>
62. <view  v-for="index in 3">
63.         <image :src="image"></image>
64. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
65. </view><view>
66. <view  v-for="index in 3">
67.         <image :src="image"></image>
68. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
69. </view><view>
70. <view  v-for="index in 3">
71.         <image :src="image"></image>
72. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
73. </view><view>
74. <view  v-for="index in 3">
75.         <image :src="image"></image>
76. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
77. </view>"text": "首页"<view>
78. <view  v-for="index in 3">
79.         <image :src="image"></image>
80. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
81. </view><view>
82. <view  v-for="index in 3">
83.         <image :src="image"></image>
84. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
85. </view><view>
86. <view  v-for="index in 3">
87.         <image :src="image"></image>
88. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
89. </view>},<view>
90. <view  v-for="index in 3">
91.         <image :src="image"></image>
92. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
93. </view><view>
94. <view  v-for="index in 3">
95.         <image :src="image"></image>
96. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
97. </view><view>
98. <view  v-for="index in 3">
99.         <image :src="image"></image>
100. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
101. </view>{<view>
102. <view  v-for="index in 3">
103.         <image :src="image"></image>
104. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
105. </view><view>
106. <view  v-for="index in 3">
107.         <image :src="image"></image>
108. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
109. </view><view>
110. <view  v-for="index in 3">
111.         <image :src="image"></image>
112. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
113. </view><view>
114. <view  v-for="index in 3">
115.         <image :src="image"></image>
116. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
117. </view>"pagePath": "pages/list/list",<view>
118. <view  v-for="index in 3">
119.         <image :src="image"></image>
120. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
121. </view><view>
122. <view  v-for="index in 3">
123.         <image :src="image"></image>
124. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
125. </view><view>
126. <view  v-for="index in 3">
127.         <image :src="image"></image>
128. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
129. </view><view>
130. <view  v-for="index in 3">
131.         <image :src="image"></image>
132. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
133. </view>"text": "列表"<view>
134. <view  v-for="index in 3">
135.         <image :src="image"></image>
136. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
137. </view><view>
138. <view  v-for="index in 3">
139.         <image :src="image"></image>
140. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
141. </view><view>
142. <view  v-for="index in 3">
143.         <image :src="image"></image>
144. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
145. </view>}<view>
146. <view  v-for="index in 3">
147.         <image :src="image"></image>
148. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
149. </view><view>
150. <view  v-for="index in 3">
151.         <image :src="image"></image>
152. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
153. </view>]<view>
154. <view  v-for="index in 3">
155.         <image :src="image"></image>
156. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
157. </view>}}

复制代码

表单提交

1. <template>
2. <view>
3. <view  v-for="index in 3">
4.         <image :src="image"></image>
5. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
6. </view><view >
7. <view>
8. <view  v-for="index in 3">
9.         <image :src="image"></image>
10. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
11. </view><view>
12. <view  v-for="index in 3">
13.         <image :src="image"></image>
14. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
15. </view>
16. <view>
17. <view  v-for="index in 3">
18.         <image :src="image"></image>
19. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
20. </view><view>
21. <view  v-for="index in 3">
22.         <image :src="image"></image>
23. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
24. </view><scroll-view  scroll-x="true">
25. <view>
26. <view  v-for="index in 3">
27.         <image :src="image"></image>
28. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
29. </view><view>
30. <view  v-for="index in 3">
31.         <image :src="image"></image>
32. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
33. </view><view>
34. <view  v-for="index in 3">
35.         <image :src="image"></image>
36. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
37. </view><image  src="../../static/img/小猫测试.jpeg">
38. <view>
39. <view  v-for="index in 3">
40.         <image :src="image"></image>
41. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
42. </view><view>
43. <view  v-for="index in 3">
44.         <image :src="image"></image>
45. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
46. </view><view>
47. <view  v-for="index in 3">
48.         <image :src="image"></image>
49. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
50. </view></image>
51. <view>
52. <view  v-for="index in 3">
53.         <image :src="image"></image>
54. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
55. </view><view>
56. <view  v-for="index in 3">
57.         <image :src="image"></image>
58. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
59. </view><view>
60. <view  v-for="index in 3">
61.         <image :src="image"></image>
62. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
63. </view><image  src="../../static/img/小猫测试.jpeg">
64. <view>
65. <view  v-for="index in 3">
66.         <image :src="image"></image>
67. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
68. </view><view>
69. <view  v-for="index in 3">
70.         <image :src="image"></image>
71. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
72. </view><view>
73. <view  v-for="index in 3">
74.         <image :src="image"></image>
75. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
76. </view></image>
77. <view>
78. <view  v-for="index in 3">
79.         <image :src="image"></image>
80. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
81. </view><view>
82. <view  v-for="index in 3">
83.         <image :src="image"></image>
84. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
85. </view><view>
86. <view  v-for="index in 3">
87.         <image :src="image"></image>
88. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
89. </view><image  src="../../static/img/小猫测试.jpeg">
90. <view>
91. <view  v-for="index in 3">
92.         <image :src="image"></image>
93. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
94. </view><view>
95. <view  v-for="index in 3">
96.         <image :src="image"></image>
97. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
98. </view><view>
99. <view  v-for="index in 3">
100.         <image :src="image"></image>
101. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
102. </view></image>
103. <view>
104. <view  v-for="index in 3">
105.         <image :src="image"></image>
106. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
107. </view><view>
108. <view  v-for="index in 3">
109.         <image :src="image"></image>
110. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
111. </view></scroll-view>
112. <view>
113. <view  v-for="index in 3">
114.         <image :src="image"></image>
115. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
116. </view></view>
117. </template><swiper indicator-dots >
118. <view>
119. <view  v-for="index in 3">
120.         <image :src="image"></image>
121. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
122. </view><swiper-item>
123. <view>
124. <view  v-for="index in 3">
125.         <image :src="image"></image>
126. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
127. </view><view>
128. <view  v-for="index in 3">
129.         <image :src="image"></image>
130. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
131. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
132. <view>
133. <view  v-for="index in 3">
134.         <image :src="image"></image>
135. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
136. </view></swiper-item>
137. <view>
138. <view  v-for="index in 3">
139.         <image :src="image"></image>
140. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
141. </view><swiper-item>
142. <view>
143. <view  v-for="index in 3">
144.         <image :src="image"></image>
145. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
146. </view><view>
147. <view  v-for="index in 3">
148.         <image :src="image"></image>
149. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
150. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
151. <view>
152. <view  v-for="index in 3">
153.         <image :src="image"></image>
154. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
155. </view></swiper-item>
156. <view>
157. <view  v-for="index in 3">
158.         <image :src="image"></image>
159. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
160. </view><swiper-item>
161. <view>
162. <view  v-for="index in 3">
163.         <image :src="image"></image>
164. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
165. </view><view>
166. <view  v-for="index in 3">
167.         <image :src="image"></image>
168. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
169. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
170. <view>
171. <view  v-for="index in 3">
172.         <image :src="image"></image>
173. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
174. </view></swiper-item>
175. </swiper><view>
176. <view  v-for="index in 3">
177.         <image :src="image"></image>
178. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
179. </view><view>
180. <view  v-for="index in 3">
181.         <image :src="image"></image>
182. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
183. </view><view>
184. <view  v-for="index in 3">
185.         <image :src="image"></image>
186. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
187. </view>男<swiper indicator-dots >
188. <view>
189. <view  v-for="index in 3">
190.         <image :src="image"></image>
191. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
192. </view><swiper-item>
193. <view>
194. <view  v-for="index in 3">
195.         <image :src="image"></image>
196. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
197. </view><view>
198. <view  v-for="index in 3">
199.         <image :src="image"></image>
200. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
201. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
202. <view>
203. <view  v-for="index in 3">
204.         <image :src="image"></image>
205. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
206. </view></swiper-item>
207. <view>
208. <view  v-for="index in 3">
209.         <image :src="image"></image>
210. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
211. </view><swiper-item>
212. <view>
213. <view  v-for="index in 3">
214.         <image :src="image"></image>
215. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
216. </view><view>
217. <view  v-for="index in 3">
218.         <image :src="image"></image>
219. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
220. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
221. <view>
222. <view  v-for="index in 3">
223.         <image :src="image"></image>
224. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
225. </view></swiper-item>
226. <view>
227. <view  v-for="index in 3">
228.         <image :src="image"></image>
229. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
230. </view><swiper-item>
231. <view>
232. <view  v-for="index in 3">
233.         <image :src="image"></image>
234. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
235. </view><view>
236. <view  v-for="index in 3">
237.         <image :src="image"></image>
238. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
239. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
240. <view>
241. <view  v-for="index in 3">
242.         <image :src="image"></image>
243. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
244. </view></swiper-item>
245. </swiper><view>
246. <view  v-for="index in 3">
247.         <image :src="image"></image>
248. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
249. </view><view>
250. <view  v-for="index in 3">
251.         <image :src="image"></image>
252. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
253. </view><view>
254. <view  v-for="index in 3">
255.         <image :src="image"></image>
256. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
257. </view><view>
258. <view  v-for="index in 3">
259.         <image :src="image"></image>
260. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
261. </view>女<swiper indicator-dots >
262. <view>
263. <view  v-for="index in 3">
264.         <image :src="image"></image>
265. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
266. </view><swiper-item>
267. <view>
268. <view  v-for="index in 3">
269.         <image :src="image"></image>
270. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
271. </view><view>
272. <view  v-for="index in 3">
273.         <image :src="image"></image>
274. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
275. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
276. <view>
277. <view  v-for="index in 3">
278.         <image :src="image"></image>
279. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
280. </view></swiper-item>
281. <view>
282. <view  v-for="index in 3">
283.         <image :src="image"></image>
284. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
285. </view><swiper-item>
286. <view>
287. <view  v-for="index in 3">
288.         <image :src="image"></image>
289. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
290. </view><view>
291. <view  v-for="index in 3">
292.         <image :src="image"></image>
293. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
294. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
295. <view>
296. <view  v-for="index in 3">
297.         <image :src="image"></image>
298. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
299. </view></swiper-item>
300. <view>
301. <view  v-for="index in 3">
302.         <image :src="image"></image>
303. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
304. </view><swiper-item>
305. <view>
306. <view  v-for="index in 3">
307.         <image :src="image"></image>
308. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
309. </view><view>
310. <view  v-for="index in 3">
311.         <image :src="image"></image>
312. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
313. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
314. <view>
315. <view  v-for="index in 3">
316.         <image :src="image"></image>
317. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
318. </view></swiper-item>
319. </swiper><view>
320. <view  v-for="index in 3">
321.         <image :src="image"></image>
322. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
323. </view><view>
324. <view  v-for="index in 3">
325.         <image :src="image"></image>
326. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
327. </view><view>
328. <view  v-for="index in 3">
329.         <image :src="image"></image>
330. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
331. </view><view>
332. <view  v-for="index in 3">
333.         <image :src="image"></image>
334. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
335. </view>保密<swiper indicator-dots >
336. <view>
337. <view  v-for="index in 3">
338.         <image :src="image"></image>
339. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
340. </view><swiper-item>
341. <view>
342. <view  v-for="index in 3">
343.         <image :src="image"></image>
344. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
345. </view><view>
346. <view  v-for="index in 3">
347.         <image :src="image"></image>
348. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
349. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
350. <view>
351. <view  v-for="index in 3">
352.         <image :src="image"></image>
353. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
354. </view></swiper-item>
355. <view>
356. <view  v-for="index in 3">
357.         <image :src="image"></image>
358. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
359. </view><swiper-item>
360. <view>
361. <view  v-for="index in 3">
362.         <image :src="image"></image>
363. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
364. </view><view>
365. <view  v-for="index in 3">
366.         <image :src="image"></image>
367. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
368. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
369. <view>
370. <view  v-for="index in 3">
371.         <image :src="image"></image>
372. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
373. </view></swiper-item>
374. <view>
375. <view  v-for="index in 3">
376.         <image :src="image"></image>
377. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
378. </view><swiper-item>
379. <view>
380. <view  v-for="index in 3">
381.         <image :src="image"></image>
382. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
383. </view><view>
384. <view  v-for="index in 3">
385.         <image :src="image"></image>
386. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
387. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
388. <view>
389. <view  v-for="index in 3">
390.         <image :src="image"></image>
391. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
392. </view></swiper-item>
393. </swiper><swiper indicator-dots >
394. <view>
395. <view  v-for="index in 3">
396.         <image :src="image"></image>
397. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
398. </view><swiper-item>
399. <view>
400. <view  v-for="index in 3">
401.         <image :src="image"></image>
402. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
403. </view><view>
404. <view  v-for="index in 3">
405.         <image :src="image"></image>
406. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
407. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
408. <view>
409. <view  v-for="index in 3">
410.         <image :src="image"></image>
411. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
412. </view></swiper-item>
413. <view>
414. <view  v-for="index in 3">
415.         <image :src="image"></image>
416. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
417. </view><swiper-item>
418. <view>
419. <view  v-for="index in 3">
420.         <image :src="image"></image>
421. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
422. </view><view>
423. <view  v-for="index in 3">
424.         <image :src="image"></image>
425. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
426. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
427. <view>
428. <view  v-for="index in 3">
429.         <image :src="image"></image>
430. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
431. </view></swiper-item>
432. <view>
433. <view  v-for="index in 3">
434.         <image :src="image"></image>
435. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
436. </view><swiper-item>
437. <view>
438. <view  v-for="index in 3">
439.         <image :src="image"></image>
440. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
441. </view><view>
442. <view  v-for="index in 3">
443.         <image :src="image"></image>
444. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
445. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
446. <view>
447. <view  v-for="index in 3">
448.         <image :src="image"></image>
449. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
450. </view></swiper-item>
451. </swiper>地址: {{options[selectedAddress]}}<swiper indicator-dots >
452. <view>
453. <view  v-for="index in 3">
454.         <image :src="image"></image>
455. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
456. </view><swiper-item>
457. <view>
458. <view  v-for="index in 3">
459.         <image :src="image"></image>
460. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
461. </view><view>
462. <view  v-for="index in 3">
463.         <image :src="image"></image>
464. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
465. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
466. <view>
467. <view  v-for="index in 3">
468.         <image :src="image"></image>
469. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
470. </view></swiper-item>
471. <view>
472. <view  v-for="index in 3">
473.         <image :src="image"></image>
474. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
475. </view><swiper-item>
476. <view>
477. <view  v-for="index in 3">
478.         <image :src="image"></image>
479. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
480. </view><view>
481. <view  v-for="index in 3">
482.         <image :src="image"></image>
483. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
484. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
485. <view>
486. <view  v-for="index in 3">
487.         <image :src="image"></image>
488. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
489. </view></swiper-item>
490. <view>
491. <view  v-for="index in 3">
492.         <image :src="image"></image>
493. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
494. </view><swiper-item>
495. <view>
496. <view  v-for="index in 3">
497.         <image :src="image"></image>
498. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
499. </view><view>
500. <view  v-for="index in 3">
501.         <image :src="image"></image>
502. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
503. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
504. <view>
505. <view  v-for="index in 3">
506.         <image :src="image"></image>
507. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
508. </view></swiper-item>
509. </swiper><view>
510. <view  v-for="index in 3">
511.         <image :src="image"></image>
512. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
513. </view><view>
514. <view  v-for="index in 3">
515.         <image :src="image"></image>
516. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
517. </view>提交表单<view>
518. <view  v-for="index in 3">
519.         <image :src="image"></image>
520. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
521. </view><view>
522. <view  v-for="index in 3">
523.         <image :src="image"></image>
524. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
525. </view><view>
526. <view  v-for="index in 3">
527.         <image :src="image"></image>
528. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
529. </view><view>
530. <view  v-for="index in 3">
531.         <image :src="image"></image>
532. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
533. </view>重置表单<view>
534. <view  v-for="index in 3">
535.         <image :src="image"></image>
536. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
537. </view><view>
538. <view  v-for="index in 3">
539.         <image :src="image"></image>
540. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
541. </view><view>
542. <view  v-for="index in 3">
543.         <image :src="image"></image>
544. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
545. </view><view>
546. <view  v-for="index in 3">
547.         <image :src="image"></image>
548. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
549. </view><view>
550. <view  v-for="index in 3">
551.         <image :src="image"></image>
552. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
553. </view><view>
554. <view  v-for="index in 3">
555.         <image :src="image"></image>
556. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
557. </view>{{form}}<view>
558. <view  v-for="index in 3">
559.         <image :src="image"></image>
560. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
561. </view><view>
562. <view  v-for="index in 3">
563.         <image :src="image"></image>
564. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
565. </view><view>
566. <view  v-for="index in 3">
567.         <image :src="image"></image>
568. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
569. </view>

复制代码

提交表单三个条件:
1.标签中添加name
2.button添加form-type='submit'
3.form标签添加提交事件方法
组件

根目录下在components目录下创建组件文件夹，符合‘components/组件名称/组件名称.vue’目录结构

1. <view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view><view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view><view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view>自定义组件<view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view>

复制代码

引入组件myitem

1. [/code][align=center] [/align]
2. [size=5]动态赋值子组件的属性字段props[/size]
4. props 可以是数组或对象，用于接收来自父组件的数据
5. [b]新闻标题组件[/b]
6. [code]<view>
7. <view  v-for="index in 3">
8.         <image :src="image"></image>
9. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
10. </view><view>
11. <view  v-for="index in 3">
12.         <image :src="image"></image>
13. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
14. </view><view>
15. <view  v-for="index in 3">
16.         <image :src="image"></image>
17. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
18. </view><view>
19. <view  v-for="index in 3">
20.         <image :src="image"></image>
21. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
22. </view><view>
23. <view  v-for="index in 3">
24.         <image :src="image"></image>
25. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
26. </view><view>
27. <view  v-for="index in 3">
28.         <image :src="image"></image>
29. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
30. </view>{{title}}<view>
31. <view  v-for="index in 3">
32.         <image :src="image"></image>
33. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
34. </view><view>
35. <view  v-for="index in 3">
36.         <image :src="image"></image>
37. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
38. </view><view>
39. <view  v-for="index in 3">
40.         <image :src="image"></image>
41. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
42. </view>新闻二标题<view>
43. <view  v-for="index in 3">
44.         <image :src="image"></image>
45. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
46. </view><view>
47. <view  v-for="index in 3">
48.         <image :src="image"></image>
49. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
50. </view><view>
51. <view  v-for="index in 3">
52.         <image :src="image"></image>
53. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
54. </view><view>
55. <view  v-for="index in 3">
56.         <image :src="image"></image>
57. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
58. </view><view>
59. <view  v-for="index in 3">
60.         <image :src="image"></image>
61. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
62. </view><view>
63. <view  v-for="index in 3">
64.         <image :src="image"></image>
65. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
66. </view><view>
67. <view  v-for="index in 3">
68.         <image :src="image"></image>
69. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
70. </view><view>
71. <view  v-for="index in 3">
72.         <image :src="image"></image>
73. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
74. </view><view>
75. <view  v-for="index in 3">
76.         <image :src="image"></image>
77. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
78. </view>组件中data属性:{{commonData}}<view>
79. <view  v-for="index in 3">
80.         <image :src="image"></image>
81. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
82. </view><view>
83. <view  v-for="index in 3">
84.         <image :src="image"></image>
85. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
86. </view><view>
87. <view  v-for="index in 3">
88.         <image :src="image"></image>
89. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
90. </view>组件中<view>data属性随机值只加载一次:{{randomNum}}</view><view>
91. <view  v-for="index in 3">
92.         <image :src="image"></image>
93. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
94. </view><view>
95. <view  v-for="index in 3">
96.         <image :src="image"></image>
97. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
98. </view><view>
99. <view  v-for="index in 3">
100.         <image :src="image"></image>
101. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
102. </view>组件中数组类型:{{list}}<view>
103. <view  v-for="index in 3">
104.         <image :src="image"></image>
105. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
106. </view><view>
107. <view  v-for="index in 3">
108.         <image :src="image"></image>
109. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
110. </view><view>
111. <view  v-for="index in 3">
112.         <image :src="image"></image>
113. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
114. </view>组件中Object类型:{{obj}}<view>
115. <view  v-for="index in 3">
116.         <image :src="image"></image>
117. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
118. </view><view>
119. <view  v-for="index in 3">
120.         <image :src="image"></image>
121. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
122. </view><view>
123. <view  v-for="index in 3">
124.         <image :src="image"></image>
125. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
126. </view>

复制代码

使用组件

1. [/code][code]export default {<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>data() {<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view><view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view>return {<view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view><view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view><view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view>newBigTitle: "demo4新闻大标题"<view>
26. <view  v-for="index in 3">
27.         <image :src="image"></image>
28. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
29. </view><view>
30. <view  v-for="index in 3">
31.         <image :src="image"></image>
32. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
33. </view>}<view>
34. <view  v-for="index in 3">
35.         <image :src="image"></image>
36. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
37. </view>}}

复制代码

1.组件中定义props属性字段
2.组件中使用props属性
3.引入组件，赋值props属性值
组件中的数组类型和Object类型，必须使用function函数返回。
VUE语法

data 属性

data 必须声明为返回一个初始数据对象的函数（注意函数内返回的数据对象不要直接引用函数外的对象）；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。
data: 初始化页面属性值

1. //正确用法，使用函数返回对象<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>data() {<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view><view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view>return {<view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view><view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view><view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view>title: 'Hello'<view>
26. <view  v-for="index in 3">
27.         <image :src="image"></image>
28. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
29. </view><view>
30. <view  v-for="index in 3">
31.         <image :src="image"></image>
32. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
33. </view>}<view>
34. <view  v-for="index in 3">
35.         <image :src="image"></image>
36. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
37. </view>}<view>
38. <view  v-for="index in 3">
39.         <image :src="image"></image>
40. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
41. </view>//错误写法，会导致再次打开页面时，显示上次数据<view>
42. <view  v-for="index in 3">
43.         <image :src="image"></image>
44. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
45. </view>data: {<view>
46. <view  v-for="index in 3">
47.         <image :src="image"></image>
48. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
49. </view><view>
50. <view  v-for="index in 3">
51.         <image :src="image"></image>
52. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
53. </view>title: 'Hello'<view>
54. <view  v-for="index in 3">
55.         <image :src="image"></image>
56. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
57. </view>}<view>
58. <view  v-for="index in 3">
59.         <image :src="image"></image>
60. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
61. </view>//错误写法，同样会导致多个组件实例对象数据相互影响<view>
62. <view  v-for="index in 3">
63.         <image :src="image"></image>
64. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
65. </view>const obj = {<view>
66. <view  v-for="index in 3">
67.         <image :src="image"></image>
68. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
69. </view><view>
70. <view  v-for="index in 3">
71.         <image :src="image"></image>
72. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
73. </view>title: 'Hello'<view>
74. <view  v-for="index in 3">
75.         <image :src="image"></image>
76. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
77. </view>}<view>
78. <view  v-for="index in 3">
79.         <image :src="image"></image>
80. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
81. </view>data() {<view>
82. <view  v-for="index in 3">
83.         <image :src="image"></image>
84. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
85. </view><view>
86. <view  v-for="index in 3">
87.         <image :src="image"></image>
88. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
89. </view>return {<view>
90. <view  v-for="index in 3">
91.         <image :src="image"></image>
92. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
93. </view><view>
94. <view  v-for="index in 3">
95.         <image :src="image"></image>
96. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
97. </view><view>
98. <view  v-for="index in 3">
99.         <image :src="image"></image>
100. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
101. </view>obj<view>
102. <view  v-for="index in 3">
103.         <image :src="image"></image>
104. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
105. </view><view>
106. <view  v-for="index in 3">
107.         <image :src="image"></image>
108. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
109. </view>}<view>
110. <view  v-for="index in 3">
111.         <image :src="image"></image>
112. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
113. </view>}

复制代码

数据不会自动销毁，再次打开该页面时，会显示上次数据

1. <view>data属性随机值只加载一次:{{randomNum}}</view>

复制代码

1. export default {<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>data() {<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view><view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view>return {<view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view><view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view><view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view>"randomNum": Math.random().toFixed(2)<view>
26. <view  v-for="index in 3">
27.         <image :src="image"></image>
28. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
29. </view><view>
30. <view  v-for="index in 3">
31.         <image :src="image"></image>
32. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
33. </view>}<view>
34. <view  v-for="index in 3">
35.         <image :src="image"></image>
36. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
37. </view>}}

复制代码

刷新页面重新加载

指令

v-if/v-else

1. <view v-if="state">显示</view>
4. <view v-else>不显示</view>

复制代码

1. data() {<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>return {<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view><view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view>title: 'Hello',<view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view><view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view>state: true<view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view>}},

复制代码

v-show

1. <view v-if="state">显示</view>
2. <view v-else>1</view>
3. <view v-show="state">v-show展示</view>
4. <view v-show="!state">v-show不展示</view>

复制代码

v-show: 通过判断属性值真假，使用css样式控制内容是否显示
v-for循环

1. <view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>产品:{{item.name}} {{index}}<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view>价格:{{item.price}} {{index}}<view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view>{{key}}: {{value}},脚标: {{index}}

复制代码

1. <view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>export default {<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view><view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view>data() {<view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view><view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view><view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view>return {<view>
26. <view  v-for="index in 3">
27.         <image :src="image"></image>
28. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
29. </view><view>
30. <view  v-for="index in 3">
31.         <image :src="image"></image>
32. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
33. </view><view>
34. <view  v-for="index in 3">
35.         <image :src="image"></image>
36. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
37. </view><view>
38. <view  v-for="index in 3">
39.         <image :src="image"></image>
40. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
41. </view>title: 'Hello',<view>
42. <view  v-for="index in 3">
43.         <image :src="image"></image>
44. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
45. </view><view>
46. <view  v-for="index in 3">
47.         <image :src="image"></image>
48. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
49. </view><view>
50. <view  v-for="index in 3">
51.         <image :src="image"></image>
52. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
53. </view><view>
54. <view  v-for="index in 3">
55.         <image :src="image"></image>
56. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
57. </view>state: true,<view>
58. <view  v-for="index in 3">
59.         <image :src="image"></image>
60. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
61. </view><view>
62. <view  v-for="index in 3">
63.         <image :src="image"></image>
64. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
65. </view><view>
66. <view  v-for="index in 3">
67.         <image :src="image"></image>
68. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
69. </view><view>
70. <view  v-for="index in 3">
71.         <image :src="image"></image>
72. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
73. </view>products: [{<view>
74. <view  v-for="index in 3">
75.         <image :src="image"></image>
76. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
77. </view><view>
78. <view  v-for="index in 3">
79.         <image :src="image"></image>
80. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
81. </view><view>
82. <view  v-for="index in 3">
83.         <image :src="image"></image>
84. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
85. </view><view>
86. <view  v-for="index in 3">
87.         <image :src="image"></image>
88. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
89. </view><view>
90. <view  v-for="index in 3">
91.         <image :src="image"></image>
92. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
93. </view><view>
94. <view  v-for="index in 3">
95.         <image :src="image"></image>
96. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
97. </view>name: "好物",<view>
98. <view  v-for="index in 3">
99.         <image :src="image"></image>
100. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
101. </view><view>
102. <view  v-for="index in 3">
103.         <image :src="image"></image>
104. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
105. </view><view>
106. <view  v-for="index in 3">
107.         <image :src="image"></image>
108. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
109. </view><view>
110. <view  v-for="index in 3">
111.         <image :src="image"></image>
112. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
113. </view><view>
114. <view  v-for="index in 3">
115.         <image :src="image"></image>
116. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
117. </view><view>
118. <view  v-for="index in 3">
119.         <image :src="image"></image>
120. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
121. </view>price: "20.18"<view>
122. <view  v-for="index in 3">
123.         <image :src="image"></image>
124. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
125. </view><view>
126. <view  v-for="index in 3">
127.         <image :src="image"></image>
128. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
129. </view><view>
130. <view  v-for="index in 3">
131.         <image :src="image"></image>
132. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
133. </view><view>
134. <view  v-for="index in 3">
135.         <image :src="image"></image>
136. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
137. </view><view>
138. <view  v-for="index in 3">
139.         <image :src="image"></image>
140. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
141. </view>},<view>
142. <view  v-for="index in 3">
143.         <image :src="image"></image>
144. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
145. </view><view>
146. <view  v-for="index in 3">
147.         <image :src="image"></image>
148. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
149. </view><view>
150. <view  v-for="index in 3">
151.         <image :src="image"></image>
152. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
153. </view><view>
154. <view  v-for="index in 3">
155.         <image :src="image"></image>
156. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
157. </view><view>
158. <view  v-for="index in 3">
159.         <image :src="image"></image>
160. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
161. </view>{<view>
162. <view  v-for="index in 3">
163.         <image :src="image"></image>
164. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
165. </view><view>
166. <view  v-for="index in 3">
167.         <image :src="image"></image>
168. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
169. </view><view>
170. <view  v-for="index in 3">
171.         <image :src="image"></image>
172. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
173. </view><view>
174. <view  v-for="index in 3">
175.         <image :src="image"></image>
176. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
177. </view><view>
178. <view  v-for="index in 3">
179.         <image :src="image"></image>
180. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
181. </view><view>
182. <view  v-for="index in 3">
183.         <image :src="image"></image>
184. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
185. </view>name: "好物1",<view>
186. <view  v-for="index in 3">
187.         <image :src="image"></image>
188. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
189. </view><view>
190. <view  v-for="index in 3">
191.         <image :src="image"></image>
192. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
193. </view><view>
194. <view  v-for="index in 3">
195.         <image :src="image"></image>
196. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
197. </view><view>
198. <view  v-for="index in 3">
199.         <image :src="image"></image>
200. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
201. </view><view>
202. <view  v-for="index in 3">
203.         <image :src="image"></image>
204. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
205. </view><view>
206. <view  v-for="index in 3">
207.         <image :src="image"></image>
208. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
209. </view>price: "20.19"<view>
210. <view  v-for="index in 3">
211.         <image :src="image"></image>
212. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
213. </view><view>
214. <view  v-for="index in 3">
215.         <image :src="image"></image>
216. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
217. </view><view>
218. <view  v-for="index in 3">
219.         <image :src="image"></image>
220. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
221. </view><view>
222. <view  v-for="index in 3">
223.         <image :src="image"></image>
224. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
225. </view><view>
226. <view  v-for="index in 3">
227.         <image :src="image"></image>
228. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
229. </view>},<view>
230. <view  v-for="index in 3">
231.         <image :src="image"></image>
232. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
233. </view><view>
234. <view  v-for="index in 3">
235.         <image :src="image"></image>
236. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
237. </view><view>
238. <view  v-for="index in 3">
239.         <image :src="image"></image>
240. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
241. </view><view>
242. <view  v-for="index in 3">
243.         <image :src="image"></image>
244. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
245. </view><view>
246. <view  v-for="index in 3">
247.         <image :src="image"></image>
248. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
249. </view>forObject: {<view>
250. <view  v-for="index in 3">
251.         <image :src="image"></image>
252. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
253. </view><view>
254. <view  v-for="index in 3">
255.         <image :src="image"></image>
256. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
257. </view><view>
258. <view  v-for="index in 3">
259.         <image :src="image"></image>
260. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
261. </view><view>
262. <view  v-for="index in 3">
263.         <image :src="image"></image>
264. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
265. </view><view>
266. <view  v-for="index in 3">
267.         <image :src="image"></image>
268. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
269. </view><view>
270. <view  v-for="index in 3">
271.         <image :src="image"></image>
272. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
273. </view>name: "张三",<view>
274. <view  v-for="index in 3">
275.         <image :src="image"></image>
276. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
277. </view><view>
278. <view  v-for="index in 3">
279.         <image :src="image"></image>
280. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
281. </view><view>
282. <view  v-for="index in 3">
283.         <image :src="image"></image>
284. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
285. </view><view>
286. <view  v-for="index in 3">
287.         <image :src="image"></image>
288. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
289. </view><view>
290. <view  v-for="index in 3">
291.         <image :src="image"></image>
292. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
293. </view><view>
294. <view  v-for="index in 3">
295.         <image :src="image"></image>
296. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
297. </view>age: "29"<view>
298. <view  v-for="index in 3">
299.         <image :src="image"></image>
300. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
301. </view><view>
302. <view  v-for="index in 3">
303.         <image :src="image"></image>
304. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
305. </view><view>
306. <view  v-for="index in 3">
307.         <image :src="image"></image>
308. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
309. </view><view>
310. <view  v-for="index in 3">
311.         <image :src="image"></image>
312. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
313. </view><view>
314. <view  v-for="index in 3">
315.         <image :src="image"></image>
316. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
317. </view>}<view>
318. <view  v-for="index in 3">
319.         <image :src="image"></image>
320. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
321. </view><view>
322. <view  v-for="index in 3">
323.         <image :src="image"></image>
324. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
325. </view><view>
326. <view  v-for="index in 3">
327.         <image :src="image"></image>
328. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
329. </view><view>
330. <view  v-for="index in 3">
331.         <image :src="image"></image>
332. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
333. </view>]<view>
334. <view  v-for="index in 3">
335.         <image :src="image"></image>
336. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
337. </view><view>
338. <view  v-for="index in 3">
339.         <image :src="image"></image>
340. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
341. </view><view>
342. <view  v-for="index in 3">
343.         <image :src="image"></image>
344. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
345. </view>}<view>
346. <view  v-for="index in 3">
347.         <image :src="image"></image>
348. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
349. </view><view>
350. <view  v-for="index in 3">
351.         <image :src="image"></image>
352. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
353. </view>}<view>
354. <view  v-for="index in 3">
355.         <image :src="image"></image>
356. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
357. </view>}

复制代码

1. <view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>

复制代码

v-for会遍历标签及其子内容
v-html标签

1. [/code][code]htmlStr: "<h1>Hello</h1>",
2. title: 'Hello',

复制代码

v-bind动态绑定

v-bind: 动态绑定组件中的属性值

1. <view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view><view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view>

复制代码

1. image: "/static/img/小猫测试.jpeg",

复制代码

v-on 指令

指的是事件

1. <view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>{{title}}<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view>{{title}}

复制代码

class与style绑定

1. [/code][code]export default {<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>data() {<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view><view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view>return {<view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view><view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view><view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view>bgcolor: "#000"<view>
26. <view  v-for="index in 3">
27.         <image :src="image"></image>
28. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
29. </view><view>
30. <view  v-for="index in 3">
31.         <image :src="image"></image>
32. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
33. </view>}<view>
34. <view  v-for="index in 3">
35.         <image :src="image"></image>
36. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
37. </view>}}

复制代码

1. [/code][code]export default {<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>data() {<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view><view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view>return {<view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view><view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view><view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view>state: true<view>
26. <view  v-for="index in 3">
27.         <image :src="image"></image>
28. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
29. </view><view>
30. <view  v-for="index in 3">
31.         <image :src="image"></image>
32. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
33. </view>}<view>
34. <view  v-for="index in 3">
35.         <image :src="image"></image>
36. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
37. </view>}}

复制代码

1. .myclass{<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>width: 200rpx;<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view>height: 200rpx;<view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view>border: 1rpx solid red;<view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view>background: blue;}.box {<view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view>width: 200rpx;<view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view>height: 200rpx;<view>
26. <view  v-for="index in 3">
27.         <image :src="image"></image>
28. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
29. </view>border: 1rpx solid red;<view>
30. <view  v-for="index in 3">
31.         <image :src="image"></image>
32. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
33. </view>background: red;}

复制代码

动态指定myclass生效，背景色为蓝色，但仍被box样式覆盖了。说明动态指定的样式优先级低于静态样式的
使用三元表达式使类样式生效

1. <view  v-bind:>222</view>

复制代码

导航栏高亮显示

默认首页tab背景色红色，选中tab背景色变为红色，其他tab无背景色

1. <view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view><view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view><view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view>{{item.name}}<view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view>

复制代码

1. export default {<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view><view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view>data() {<view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view><view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view><view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view>return {<view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view><view>
26. <view  v-for="index in 3">
27.         <image :src="image"></image>
28. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
29. </view><view>
30. <view  v-for="index in 3">
31.         <image :src="image"></image>
32. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
33. </view><view>
34. <view  v-for="index in 3">
35.         <image :src="image"></image>
36. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
37. </view>activeIndex: 0,<view>
38. <view  v-for="index in 3">
39.         <image :src="image"></image>
40. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
41. </view><view>
42. <view  v-for="index in 3">
43.         <image :src="image"></image>
44. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
45. </view><view>
46. <view  v-for="index in 3">
47.         <image :src="image"></image>
48. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
49. </view><view>
50. <view  v-for="index in 3">
51.         <image :src="image"></image>
52. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
53. </view>navs: [{<view>
54. <view  v-for="index in 3">
55.         <image :src="image"></image>
56. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
57. </view><view>
58. <view  v-for="index in 3">
59.         <image :src="image"></image>
60. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
61. </view><view>
62. <view  v-for="index in 3">
63.         <image :src="image"></image>
64. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
65. </view><view>
66. <view  v-for="index in 3">
67.         <image :src="image"></image>
68. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
69. </view><view>
70. <view  v-for="index in 3">
71.         <image :src="image"></image>
72. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
73. </view><view>
74. <view  v-for="index in 3">
75.         <image :src="image"></image>
76. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
77. </view>name: "首页"<view>
78. <view  v-for="index in 3">
79.         <image :src="image"></image>
80. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
81. </view><view>
82. <view  v-for="index in 3">
83.         <image :src="image"></image>
84. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
85. </view><view>
86. <view  v-for="index in 3">
87.         <image :src="image"></image>
88. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
89. </view><view>
90. <view  v-for="index in 3">
91.         <image :src="image"></image>
92. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
93. </view><view>
94. <view  v-for="index in 3">
95.         <image :src="image"></image>
96. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
97. </view>},<view>
98. <view  v-for="index in 3">
99.         <image :src="image"></image>
100. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
101. </view><view>
102. <view  v-for="index in 3">
103.         <image :src="image"></image>
104. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
105. </view><view>
106. <view  v-for="index in 3">
107.         <image :src="image"></image>
108. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
109. </view><view>
110. <view  v-for="index in 3">
111.         <image :src="image"></image>
112. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
113. </view><view>
114. <view  v-for="index in 3">
115.         <image :src="image"></image>
116. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
117. </view>{<view>
118. <view  v-for="index in 3">
119.         <image :src="image"></image>
120. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
121. </view><view>
122. <view  v-for="index in 3">
123.         <image :src="image"></image>
124. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
125. </view><view>
126. <view  v-for="index in 3">
127.         <image :src="image"></image>
128. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
129. </view><view>
130. <view  v-for="index in 3">
131.         <image :src="image"></image>
132. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
133. </view><view>
134. <view  v-for="index in 3">
135.         <image :src="image"></image>
136. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
137. </view><view>
138. <view  v-for="index in 3">
139.         <image :src="image"></image>
140. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
141. </view>name: "介绍"<view>
142. <view  v-for="index in 3">
143.         <image :src="image"></image>
144. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
145. </view><view>
146. <view  v-for="index in 3">
147.         <image :src="image"></image>
148. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
149. </view><view>
150. <view  v-for="index in 3">
151.         <image :src="image"></image>
152. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
153. </view><view>
154. <view  v-for="index in 3">
155.         <image :src="image"></image>
156. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
157. </view><view>
158. <view  v-for="index in 3">
159.         <image :src="image"></image>
160. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
161. </view>},<view>
162. <view  v-for="index in 3">
163.         <image :src="image"></image>
164. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
165. </view><view>
166. <view  v-for="index in 3">
167.         <image :src="image"></image>
168. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
169. </view><view>
170. <view  v-for="index in 3">
171.         <image :src="image"></image>
172. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
173. </view><view>
174. <view  v-for="index in 3">
175.         <image :src="image"></image>
176. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
177. </view><view>
178. <view  v-for="index in 3">
179.         <image :src="image"></image>
180. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
181. </view>{<view>
182. <view  v-for="index in 3">
183.         <image :src="image"></image>
184. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
185. </view><view>
186. <view  v-for="index in 3">
187.         <image :src="image"></image>
188. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
189. </view><view>
190. <view  v-for="index in 3">
191.         <image :src="image"></image>
192. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
193. </view><view>
194. <view  v-for="index in 3">
195.         <image :src="image"></image>
196. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
197. </view><view>
198. <view  v-for="index in 3">
199.         <image :src="image"></image>
200. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
201. </view><view>
202. <view  v-for="index in 3">
203.         <image :src="image"></image>
204. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
205. </view>name: "产品"<view>
206. <view  v-for="index in 3">
207.         <image :src="image"></image>
208. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
209. </view><view>
210. <view  v-for="index in 3">
211.         <image :src="image"></image>
212. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
213. </view><view>
214. <view  v-for="index in 3">
215.         <image :src="image"></image>
216. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
217. </view><view>
218. <view  v-for="index in 3">
219.         <image :src="image"></image>
220. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
221. </view><view>
222. <view  v-for="index in 3">
223.         <image :src="image"></image>
224. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
225. </view>},<view>
226. <view  v-for="index in 3">
227.         <image :src="image"></image>
228. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
229. </view><view>
230. <view  v-for="index in 3">
231.         <image :src="image"></image>
232. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
233. </view><view>
234. <view  v-for="index in 3">
235.         <image :src="image"></image>
236. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
237. </view><view>
238. <view  v-for="index in 3">
239.         <image :src="image"></image>
240. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
241. </view>]<view>
242. <view  v-for="index in 3">
243.         <image :src="image"></image>
244. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
245. </view><view>
246. <view  v-for="index in 3">
247.         <image :src="image"></image>
248. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
249. </view><view>
250. <view  v-for="index in 3">
251.         <image :src="image"></image>
252. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
253. </view>}<view>
254. <view  v-for="index in 3">
255.         <image :src="image"></image>
256. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
257. </view><view>
258. <view  v-for="index in 3">
259.         <image :src="image"></image>
260. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
261. </view>},<view>
262. <view  v-for="index in 3">
263.         <image :src="image"></image>
264. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
265. </view><view>
266. <view  v-for="index in 3">
267.         <image :src="image"></image>
268. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
269. </view>methods: {<view>
270. <view  v-for="index in 3">
271.         <image :src="image"></image>
272. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
273. </view><view>
274. <view  v-for="index in 3">
275.         <image :src="image"></image>
276. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
277. </view><view>
278. <view  v-for="index in 3">
279.         <image :src="image"></image>
280. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
281. </view>activeNav(index) {<view>
282. <view  v-for="index in 3">
283.         <image :src="image"></image>
284. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
285. </view><view>
286. <view  v-for="index in 3">
287.         <image :src="image"></image>
288. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
289. </view><view>
290. <view  v-for="index in 3">
291.         <image :src="image"></image>
292. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
293. </view><view>
294. <view  v-for="index in 3">
295.         <image :src="image"></image>
296. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
297. </view>this.activeIndex = index;<view>
298. <view  v-for="index in 3">
299.         <image :src="image"></image>
300. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
301. </view><view>
302. <view  v-for="index in 3">
303.         <image :src="image"></image>
304. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
305. </view><view>
306. <view  v-for="index in 3">
307.         <image :src="image"></image>
308. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
309. </view>}<view>
310. <view  v-for="index in 3">
311.         <image :src="image"></image>
312. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
313. </view><view>
314. <view  v-for="index in 3">
315.         <image :src="image"></image>
316. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
317. </view>}<view>
318. <view  v-for="index in 3">
319.         <image :src="image"></image>
320. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
321. </view>}

复制代码

1. .nav {<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>// 子标签内容展示在同一行<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view>display: flex;<view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view>.item {<view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view><view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view>// 使view的宽度在父标签中平均分布<view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view><view>
26. <view  v-for="index in 3">
27.         <image :src="image"></image>
28. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
29. </view>flex: 1;<view>
30. <view  v-for="index in 3">
31.         <image :src="image"></image>
32. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
33. </view><view>
34. <view  v-for="index in 3">
35.         <image :src="image"></image>
36. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
37. </view>// 内容行间距，可以让内容垂直居中<view>
38. <view  v-for="index in 3">
39.         <image :src="image"></image>
40. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
41. </view><view>
42. <view  v-for="index in 3">
43.         <image :src="image"></image>
44. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
45. </view>line-height: 100rpx;<view>
46. <view  v-for="index in 3">
47.         <image :src="image"></image>
48. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
49. </view><view>
50. <view  v-for="index in 3">
51.         <image :src="image"></image>
52. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
53. </view>// 水平居中<view>
54. <view  v-for="index in 3">
55.         <image :src="image"></image>
56. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
57. </view><view>
58. <view  v-for="index in 3">
59.         <image :src="image"></image>
60. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
61. </view>text-align: center;<view>
62. <view  v-for="index in 3">
63.         <image :src="image"></image>
64. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
65. </view><view>
66. <view  v-for="index in 3">
67.         <image :src="image"></image>
68. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
69. </view>&.active {<view>
70. <view  v-for="index in 3">
71.         <image :src="image"></image>
72. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
73. </view><view>
74. <view  v-for="index in 3">
75.         <image :src="image"></image>
76. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
77. </view><view>
78. <view  v-for="index in 3">
79.         <image :src="image"></image>
80. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
81. </view>background-color: red;<view>
82. <view  v-for="index in 3">
83.         <image :src="image"></image>
84. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
85. </view><view>
86. <view  v-for="index in 3">
87.         <image :src="image"></image>
88. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
89. </view>}<view>
90. <view  v-for="index in 3">
91.         <image :src="image"></image>
92. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
93. </view>}}

复制代码

v-model双向绑定

1. <view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view><view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view><view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view><view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view><view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view><view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view>标题: {{title}}<view>
26. <view  v-for="index in 3">
27.         <image :src="image"></image>
28. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
29. </view><view>
30. <view  v-for="index in 3">
31.         <image :src="image"></image>
32. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
33. </view><view>
34. <view  v-for="index in 3">
35.         <image :src="image"></image>
36. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
37. </view><view>
38. <view  v-for="index in 3">
39.         <image :src="image"></image>
40. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
41. </view><view>
42. <view  v-for="index in 3">
43.         <image :src="image"></image>
44. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
45. </view>

复制代码

双向绑定: 修改input值，data属性值跟着改变，修改data属性值，input值也会改变。

v-model示例

1. <swiper indicator-dots >
2. <view>
3. <view  v-for="index in 3">
4.         <image :src="image"></image>
5. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
6. </view><swiper-item>
7. <view>
8. <view  v-for="index in 3">
9.         <image :src="image"></image>
10. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
11. </view><view>
12. <view  v-for="index in 3">
13.         <image :src="image"></image>
14. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
15. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
16. <view>
17. <view  v-for="index in 3">
18.         <image :src="image"></image>
19. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
20. </view></swiper-item>
21. <view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view><swiper-item>
26. <view>
27. <view  v-for="index in 3">
28.         <image :src="image"></image>
29. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
30. </view><view>
31. <view  v-for="index in 3">
32.         <image :src="image"></image>
33. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
34. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
35. <view>
36. <view  v-for="index in 3">
37.         <image :src="image"></image>
38. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
39. </view></swiper-item>
40. <view>
41. <view  v-for="index in 3">
42.         <image :src="image"></image>
43. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
44. </view><swiper-item>
45. <view>
46. <view  v-for="index in 3">
47.         <image :src="image"></image>
48. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
49. </view><view>
50. <view  v-for="index in 3">
51.         <image :src="image"></image>
52. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
53. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
54. <view>
55. <view  v-for="index in 3">
56.         <image :src="image"></image>
57. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
58. </view></swiper-item>
59. </swiper><view>
60. <view  v-for="index in 3">
61.         <image :src="image"></image>
62. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
63. </view>提交<view>
64. <view  v-for="index in 3">
65.         <image :src="image"></image>
66. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
67. </view>{{message}}

复制代码

1. message: {<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>name: '',<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view><view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view>mobile: '',<view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view><view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view>content: ''}

复制代码

1. .out {<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>padding: 30rpx;<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view>.row {<view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view><view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view>margin-bottom: 20rpx;<view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view>}<view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view>.border {<view>
26. <view  v-for="index in 3">
27.         <image :src="image"></image>
28. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
29. </view><view>
30. <view  v-for="index in 3">
31.         <image :src="image"></image>
32. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
33. </view>width: 100%;<view>
34. <view  v-for="index in 3">
35.         <image :src="image"></image>
36. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
37. </view><view>
38. <view  v-for="index in 3">
39.         <image :src="image"></image>
40. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
41. </view>// 四个边填充10rpx<view>
42. <view  v-for="index in 3">
43.         <image :src="image"></image>
44. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
45. </view><view>
46. <view  v-for="index in 3">
47.         <image :src="image"></image>
48. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
49. </view>padding: 10rpx;<view>
50. <view  v-for="index in 3">
51.         <image :src="image"></image>
52. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
53. </view><view>
54. <view  v-for="index in 3">
55.         <image :src="image"></image>
56. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
57. </view>border: 1px solid #000;<view>
58. <view  v-for="index in 3">
59.         <image :src="image"></image>
60. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
61. </view><view>
62. <view  v-for="index in 3">
63.         <image :src="image"></image>
64. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
65. </view>// 内填充<view>
66. <view  v-for="index in 3">
67.         <image :src="image"></image>
68. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
69. </view><view>
70. <view  v-for="index in 3">
71.         <image :src="image"></image>
72. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
73. </view>box-sizing: border-box;<view>
74. <view  v-for="index in 3">
75.         <image :src="image"></image>
76. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
77. </view><view>
78. <view  v-for="index in 3">
79.         <image :src="image"></image>
80. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
81. </view>// 设置圆角<view>
82. <view  v-for="index in 3">
83.         <image :src="image"></image>
84. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
85. </view><view>
86. <view  v-for="index in 3">
87.         <image :src="image"></image>
88. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
89. </view>border-radius: 10rpx;<view>
90. <view  v-for="index in 3">
91.         <image :src="image"></image>
92. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
93. </view>}}

复制代码

计算属性和侦听器

计算属性computed

1. <view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>{{ message.split('').reverse().join('') }}

复制代码

在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多包含此处的翻转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，你都应当使用计算属性。计算属性完全可以使用方法代替，区别在于计算属性存在缓存，对于加载不变数据计算属性性能高于方法。

1. <view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view><view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view>第一次加载计算属性computeTitle值: {{computeTitle}}<view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view>
14. <view>
15. <view  v-for="index in 3">
16.         <image :src="image"></image>
17. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
18. </view>第二次加载计算属性computeTitle值: {{computeTitle}}<view>
19. <view  v-for="index in 3">
20.         <image :src="image"></image>
21. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
22. </view>
23. <view>
24. <view  v-for="index in 3">
25.         <image :src="image"></image>
26. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
27. </view>第一次加载方法computeTitle值: {{computeTitleMethod()}}<view>
28. <view  v-for="index in 3">
29.         <image :src="image"></image>
30. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
31. </view>
32. <view>
33. <view  v-for="index in 3">
34.         <image :src="image"></image>
35. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
36. </view>第二次加载方法computeTitle值: {{computeTitleMethod()}}

复制代码

1. methods: {<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>computeTitleMethod() {<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view><view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view>return Math.random();<view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view>}},computed: {<view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view>computeTitle() {<view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view><view>
26. <view  v-for="index in 3">
27.         <image :src="image"></image>
28. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
29. </view>return Math.random();<view>
30. <view  v-for="index in 3">
31.         <image :src="image"></image>
32. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
33. </view>}}

复制代码

子组件触发自定义事件传递给父组件

子组件my-event

1. methods: {<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>onInput(e) {<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view><view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view>// 使用emit向父组件传递数据<view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view><view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view>console.log("子组件输入值:" + e.detail.value);<view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view><view>
26. <view  v-for="index in 3">
27.         <image :src="image"></image>
28. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
29. </view>this.$emit('customEventName', e.detail.value)<view>
30. <view  v-for="index in 3">
31.         <image :src="image"></image>
32. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
33. </view>}}

复制代码

引入my-event

1. methods: {<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>inputValue(e) {<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view><view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view>console.log("父组件接收值:" + e);<view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view>}}

复制代码

• 子组件自定义事件名称
  
• 父组件引入子组件
  
• 父组件使用子组件定义的事件名称
  
• 子组件触发事件传递到父组件
  

父组件引入子组件时，如果使用原生事件，需要指定事件为本地事件
如:

1. [/code]在使用子组件的同时，使用原生事件click，指定.native标识。
2. [size=5]将原生事件绑定到组件[/size]
4. 使用.native修饰符，进行修饰原生组件。
5. [code]

复制代码

子组件向上传值案例

实现弹窗隐藏的功能
子组件my-pop弹窗

1. <swiper indicator-dots >
2. <view>
3. <view  v-for="index in 3">
4.         <image :src="image"></image>
5. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
6. </view><swiper-item>
7. <view>
8. <view  v-for="index in 3">
9.         <image :src="image"></image>
10. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
11. </view><view>
12. <view  v-for="index in 3">
13.         <image :src="image"></image>
14. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
15. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
16. <view>
17. <view  v-for="index in 3">
18.         <image :src="image"></image>
19. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
20. </view></swiper-item>
21. <view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view><swiper-item>
26. <view>
27. <view  v-for="index in 3">
28.         <image :src="image"></image>
29. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
30. </view><view>
31. <view  v-for="index in 3">
32.         <image :src="image"></image>
33. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
34. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
35. <view>
36. <view  v-for="index in 3">
37.         <image :src="image"></image>
38. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
39. </view></swiper-item>
40. <view>
41. <view  v-for="index in 3">
42.         <image :src="image"></image>
43. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
44. </view><swiper-item>
45. <view>
46. <view  v-for="index in 3">
47.         <image :src="image"></image>
48. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
49. </view><view>
50. <view  v-for="index in 3">
51.         <image :src="image"></image>
52. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
53. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
54. <view>
55. <view  v-for="index in 3">
56.         <image :src="image"></image>
57. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
58. </view></swiper-item>
59. </swiper>弹窗内容<view>
60. <view  v-for="index in 3">
61.         <image :src="image"></image>
62. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
63. </view><view>
64. <view  v-for="index in 3">
65.         <image :src="image"></image>
66. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
67. </view><view>
68. <view  v-for="index in 3">
69.         <image :src="image"></image>
70. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
71. </view><view>
72. <view  v-for="index in 3">
73.         <image :src="image"></image>
74. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
75. </view><view>
76. <view  v-for="index in 3">
77.         <image :src="image"></image>
78. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
79. </view><view>
80. <view  v-for="index in 3">
81.         <image :src="image"></image>
82. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
83. </view><view>
84. <view  v-for="index in 3">
85.         <image :src="image"></image>
86. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
87. </view><view>
88. <view  v-for="index in 3">
89.         <image :src="image"></image>
90. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
91. </view><view>
92. <view  v-for="index in 3">
93.         <image :src="image"></image>
94. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
95. </view><view>
96. <view  v-for="index in 3">
97.         <image :src="image"></image>
98. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
99. </view>关闭<view>
100. <view  v-for="index in 3">
101.         <image :src="image"></image>
102. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
103. </view><view>
104. <view  v-for="index in 3">
105.         <image :src="image"></image>
106. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
107. </view><view>
108. <view  v-for="index in 3">
109.         <image :src="image"></image>
110. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
111. </view><view>
112. <view  v-for="index in 3">
113.         <image :src="image"></image>
114. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
115. </view><view>
116. <view  v-for="index in 3">
117.         <image :src="image"></image>
118. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
119. </view><view>
120. <view  v-for="index in 3">
121.         <image :src="image"></image>
122. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
123. </view>

复制代码

父组件引入

1. <view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>点击弹出框<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view>data() {<view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view>return {<view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view><view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view>hiddenPop: true<view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view>}},methods: {<view>
26. <view  v-for="index in 3">
27.         <image :src="image"></image>
28. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
29. </view>showPopStatusClick() {<view>
30. <view  v-for="index in 3">
31.         <image :src="image"></image>
32. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
33. </view><view>
34. <view  v-for="index in 3">
35.         <image :src="image"></image>
36. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
37. </view>this.hiddenPop = false<view>
38. <view  v-for="index in 3">
39.         <image :src="image"></image>
40. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
41. </view>},<view>
42. <view  v-for="index in 3">
43.         <image :src="image"></image>
44. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
45. </view>shutPop(e) {<view>
46. <view  v-for="index in 3">
47.         <image :src="image"></image>
48. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
49. </view><view>
50. <view  v-for="index in 3">
51.         <image :src="image"></image>
52. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
53. </view>this.hiddenPop = true<view>
54. <view  v-for="index in 3">
55.         <image :src="image"></image>
56. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
57. </view>}}

复制代码

• 父组件默认弹窗隐藏
  
• 父组件点击事件显示弹窗
  
• 子组件弹窗触发自定义关闭事件
  
• 父组件接收事件，关闭弹窗
  

.sync 修饰符

当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。 .sync 它会被扩展为一个自动更新父组件属性的 v-on 监听器
使用sync修饰符，通过修改子组件的props可以修改父组件的属性值，因此在上面的案例中，可以通过修改子组件的hiddenStatus值，从而修改父组件的hiddenPop值。

1. [/code]子组件修改
2. [code]export default {<view>
3. <view  v-for="index in 3">
4.         <image :src="image"></image>
5. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
6. </view>props: {<view>
7. <view  v-for="index in 3">
8.         <image :src="image"></image>
9. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
10. </view><view>
11. <view  v-for="index in 3">
12.         <image :src="image"></image>
13. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
14. </view>hiddenStatus: {<view>
15. <view  v-for="index in 3">
16.         <image :src="image"></image>
17. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
18. </view><view>
19. <view  v-for="index in 3">
20.         <image :src="image"></image>
21. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
22. </view><view>
23. <view  v-for="index in 3">
24.         <image :src="image"></image>
25. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
26. </view>type: Boolean,<view>
27. <view  v-for="index in 3">
28.         <image :src="image"></image>
29. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
30. </view><view>
31. <view  v-for="index in 3">
32.         <image :src="image"></image>
33. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
34. </view><view>
35. <view  v-for="index in 3">
36.         <image :src="image"></image>
37. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
38. </view>default: true<view>
39. <view  v-for="index in 3">
40.         <image :src="image"></image>
41. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
42. </view><view>
43. <view  v-for="index in 3">
44.         <image :src="image"></image>
45. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
46. </view>}<view>
47. <view  v-for="index in 3">
48.         <image :src="image"></image>
49. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
50. </view>},<view>
51. <view  v-for="index in 3">
52.         <image :src="image"></image>
53. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
54. </view>methods: {<view>
55. <view  v-for="index in 3">
56.         <image :src="image"></image>
57. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
58. </view><view>
59. <view  v-for="index in 3">
60.         <image :src="image"></image>
61. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
62. </view>shut() {<view>
63. <view  v-for="index in 3">
64.         <image :src="image"></image>
65. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
66. </view><view>
67. <view  v-for="index in 3">
68.         <image :src="image"></image>
69. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
70. </view>    // 子组件修改绑定值格式为update:hiddenStatus，从而修改了父组件的hiddenPop值<view>
71. <view  v-for="index in 3">
72.         <image :src="image"></image>
73. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
74. </view><view>
75. <view  v-for="index in 3">
76.         <image :src="image"></image>
77. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
78. </view><view>
79. <view  v-for="index in 3">
80.         <image :src="image"></image>
81. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
82. </view>this.$emit('update:hiddenStatus', true);<view>
83. <view  v-for="index in 3">
84.         <image :src="image"></image>
85. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
86. </view><view>
87. <view  v-for="index in 3">
88.         <image :src="image"></image>
89. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
90. </view>}<view>
91. <view  v-for="index in 3">
92.         <image :src="image"></image>
93. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
94. </view>},}

复制代码

• 父组件使用.sync修改子组件hiddenStatus属性，从而绑定父组件的hiddenPop值
  
• 子组件自定义触发事件，事件名格式为 update:子组件属性值
  
• 通过子组件修改hiddenStatus值，从而修改了父组件的hiddenPop值
  
• 父组件监听hiddenPop改变，动态赋值子组件props属性值，使得父组件的hiddenPop值和子组件的hiddenStatus值相同
  

sync修饰作用就像v-model双向绑定，只是作用在父子组件之间。
vue的生命周期

App.vue中的方法

1. export default {<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>// 刷新页面会执行<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view>onLaunch: function() {<view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view><view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view>console.log('App Launch')<view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view>},<view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view>// 刷新页面会执行，屏幕显示页面会执行，如，浏览器查看其他标签，然后切换回该标签<view>
26. <view  v-for="index in 3">
27.         <image :src="image"></image>
28. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
29. </view>onShow: function() {<view>
30. <view  v-for="index in 3">
31.         <image :src="image"></image>
32. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
33. </view><view>
34. <view  v-for="index in 3">
35.         <image :src="image"></image>
36. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
37. </view>console.log('App Show')<view>
38. <view  v-for="index in 3">
39.         <image :src="image"></image>
40. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
41. </view>},<view>
42. <view  v-for="index in 3">
43.         <image :src="image"></image>
44. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
45. </view>// 屏幕隐藏页面会执行，如，浏览器查看其他标签<view>
46. <view  v-for="index in 3">
47.         <image :src="image"></image>
48. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
49. </view>onHide: function() {<view>
50. <view  v-for="index in 3">
51.         <image :src="image"></image>
52. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
53. </view><view>
54. <view  v-for="index in 3">
55.         <image :src="image"></image>
56. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
57. </view>console.log('App Hide')<view>
58. <view  v-for="index in 3">
59.         <image :src="image"></image>
60. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
61. </view>}}

复制代码

API使用

路由跳转页面

1. <view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>使用api跳转到tabbar页面demo3

复制代码

1. toTabBar() {<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>// 使用switchTab方法跳转到底部tabbar页面<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view>uni.switchTab({<view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view><view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view>url: "/pages/demo3/demo3"<view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view>})}

复制代码

页面返回

1. back() {<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>// 只会返回通过navigateTo打开的页面<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view>uni.navigateBack();}

复制代码

携带参数跳转页面传参

1. takeParamToView() {<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>uni.navigateTo({<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view><view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view>url: "/pages/list/list?name=张三&age=18"<view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view>})}

复制代码

list页面使用onLoad函数接收

1. onLoad(e) { <view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>console.log(e)}

复制代码

界面

下方弹出菜单

1. data() {<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>return {<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view><view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view>title: 'Hello',<view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view><view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view>list: ["三国演义", "西游记", "红楼梦"]<view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view>}},onLoad() {<view>
26. <view  v-for="index in 3">
27.         <image :src="image"></image>
28. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
29. </view>// 下方弹出操作菜单，可自定义菜单内容<view>
30. <view  v-for="index in 3">
31.         <image :src="image"></image>
32. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
33. </view>uni.showActionSheet({<view>
34. <view  v-for="index in 3">
35.         <image :src="image"></image>
36. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
37. </view><view>
38. <view  v-for="index in 3">
39.         <image :src="image"></image>
40. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
41. </view>itemList: this.list,<view>
42. <view  v-for="index in 3">
43.         <image :src="image"></image>
44. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
45. </view><view>
46. <view  v-for="index in 3">
47.         <image :src="image"></image>
48. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
49. </view>success: res => {<view>
50. <view  v-for="index in 3">
51.         <image :src="image"></image>
52. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
53. </view><view>
54. <view  v-for="index in 3">
55.         <image :src="image"></image>
56. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
57. </view><view>
58. <view  v-for="index in 3">
59.         <image :src="image"></image>
60. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
61. </view>console.log(this.list[res.tapIndex]);<view>
62. <view  v-for="index in 3">
63.         <image :src="image"></image>
64. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
65. </view><view>
66. <view  v-for="index in 3">
67.         <image :src="image"></image>
68. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
69. </view>}<view>
70. <view  v-for="index in 3">
71.         <image :src="image"></image>
72. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
73. </view>});},

复制代码

设置导航条

1. onLoad() {<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>// 设置导航条<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view>uni.setNavigationBarTitle({<view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view><view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view>title: '导航标题'<view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view>})}

复制代码

设置TabBar

使用iconfont图标

iconfont网站
下载ttf文件：选中将要使用的图标添加到购物车，把购物车中的图标添加到自己的项目中

打开我的项目下载ttf文件，放到到开发项目的static目录下

代码中使用图标，复制代码，把&#x替换为\u

1. "tabBar": {<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>"iconfontSrc": "static/iconfont/iconfont.ttf",<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view>"list": [{<view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view><view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view><view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view>"pagePath": "pages/index/index",<view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view><view>
26. <view  v-for="index in 3">
27.         <image :src="image"></image>
28. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
29. </view><view>
30. <view  v-for="index in 3">
31.         <image :src="image"></image>
32. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
33. </view>// 小程序暂不支持iconfont<view>
34. <view  v-for="index in 3">
35.         <image :src="image"></image>
36. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
37. </view><view>
38. <view  v-for="index in 3">
39.         <image :src="image"></image>
40. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
41. </view><view>
42. <view  v-for="index in 3">
43.         <image :src="image"></image>
44. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
45. </view>"iconfont": {<view>
46. <view  v-for="index in 3">
47.         <image :src="image"></image>
48. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
49. </view><view>
50. <view  v-for="index in 3">
51.         <image :src="image"></image>
52. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
53. </view><view>
54. <view  v-for="index in 3">
55.         <image :src="image"></image>
56. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
57. </view><view>
58. <view  v-for="index in 3">
59.         <image :src="image"></image>
60. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
61. </view>"text": "\ue60e"<view>
62. <view  v-for="index in 3">
63.         <image :src="image"></image>
64. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
65. </view><view>
66. <view  v-for="index in 3">
67.         <image :src="image"></image>
68. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
69. </view><view>
70. <view  v-for="index in 3">
71.         <image :src="image"></image>
72. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
73. </view>},<view>
74. <view  v-for="index in 3">
75.         <image :src="image"></image>
76. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
77. </view><view>
78. <view  v-for="index in 3">
79.         <image :src="image"></image>
80. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
81. </view><view>
82. <view  v-for="index in 3">
83.         <image :src="image"></image>
84. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
85. </view>"text": "首页"<view>
86. <view  v-for="index in 3">
87.         <image :src="image"></image>
88. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
89. </view><view>
90. <view  v-for="index in 3">
91.         <image :src="image"></image>
92. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
93. </view>},<view>
94. <view  v-for="index in 3">
95.         <image :src="image"></image>
96. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
97. </view><view>
98. <view  v-for="index in 3">
99.         <image :src="image"></image>
100. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
101. </view>{<view>
102. <view  v-for="index in 3">
103.         <image :src="image"></image>
104. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
105. </view><view>
106. <view  v-for="index in 3">
107.         <image :src="image"></image>
108. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
109. </view><view>
110. <view  v-for="index in 3">
111.         <image :src="image"></image>
112. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
113. </view>"pagePath": "pages/demo1/demo1"<view>
114. <view  v-for="index in 3">
115.         <image :src="image"></image>
116. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
117. </view><view>
118. <view  v-for="index in 3">
119.         <image :src="image"></image>
120. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
121. </view>}<view>
122. <view  v-for="index in 3">
123.         <image :src="image"></image>
124. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
125. </view>]}

复制代码

动态设置 tabBar 某一项的内容

1. uni.setTabBarItem({<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>index: 0,<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view>text: '文案'})

复制代码

为 tabBar 某一项的右上角添加文本。

1. onLoad() {<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>uni.setTabBarBadge({<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view>  index: 1,<view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view>  text: "1"<view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view>})}

复制代码

网络

发起请求

1. <view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>换一张<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view>

复制代码

1. methods: {<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>showPic() {<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view><view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view>uni.showLoading({<view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view><view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view><view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view>title: "加载中"<view>
26. <view  v-for="index in 3">
27.         <image :src="image"></image>
28. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
29. </view><view>
30. <view  v-for="index in 3">
31.         <image :src="image"></image>
32. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
33. </view>})<view>
34. <view  v-for="index in 3">
35.         <image :src="image"></image>
36. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
37. </view><view>
38. <view  v-for="index in 3">
39.         <image :src="image"></image>
40. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
41. </view>uni.request({<view>
42. <view  v-for="index in 3">
43.         <image :src="image"></image>
44. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
45. </view><view>
46. <view  v-for="index in 3">
47.         <image :src="image"></image>
48. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
49. </view><view>
50. <view  v-for="index in 3">
51.         <image :src="image"></image>
52. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
53. </view>url: 'https://api.thecatapi.com/v1/images/search?limit=1',<view>
54. <view  v-for="index in 3">
55.         <image :src="image"></image>
56. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
57. </view><view>
58. <view  v-for="index in 3">
59.         <image :src="image"></image>
60. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
61. </view><view>
62. <view  v-for="index in 3">
63.         <image :src="image"></image>
64. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
65. </view>method: 'GET',<view>
66. <view  v-for="index in 3">
67.         <image :src="image"></image>
68. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
69. </view><view>
70. <view  v-for="index in 3">
71.         <image :src="image"></image>
72. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
73. </view><view>
74. <view  v-for="index in 3">
75.         <image :src="image"></image>
76. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
77. </view>success: res => {<view>
78. <view  v-for="index in 3">
79.         <image :src="image"></image>
80. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
81. </view><view>
82. <view  v-for="index in 3">
83.         <image :src="image"></image>
84. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
85. </view><view>
86. <view  v-for="index in 3">
87.         <image :src="image"></image>
88. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
89. </view><view>
90. <view  v-for="index in 3">
91.         <image :src="image"></image>
92. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
93. </view>console.log(res);<view>
94. <view  v-for="index in 3">
95.         <image :src="image"></image>
96. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
97. </view><view>
98. <view  v-for="index in 3">
99.         <image :src="image"></image>
100. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
101. </view><view>
102. <view  v-for="index in 3">
103.         <image :src="image"></image>
104. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
105. </view><view>
106. <view  v-for="index in 3">
107.         <image :src="image"></image>
108. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
109. </view>this.pic = res.data[0].url;<view>
110. <view  v-for="index in 3">
111.         <image :src="image"></image>
112. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
113. </view><view>
114. <view  v-for="index in 3">
115.         <image :src="image"></image>
116. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
117. </view><view>
118. <view  v-for="index in 3">
119.         <image :src="image"></image>
120. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
121. </view><view>
122. <view  v-for="index in 3">
123.         <image :src="image"></image>
124. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
125. </view>console.log(this.pic);<view>
126. <view  v-for="index in 3">
127.         <image :src="image"></image>
128. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
129. </view><view>
130. <view  v-for="index in 3">
131.         <image :src="image"></image>
132. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
133. </view><view>
134. <view  v-for="index in 3">
135.         <image :src="image"></image>
136. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
137. </view><view>
138. <view  v-for="index in 3">
139.         <image :src="image"></image>
140. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
141. </view>uni.hideLoading();<view>
142. <view  v-for="index in 3">
143.         <image :src="image"></image>
144. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
145. </view><view>
146. <view  v-for="index in 3">
147.         <image :src="image"></image>
148. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
149. </view><view>
150. <view  v-for="index in 3">
151.         <image :src="image"></image>
152. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
153. </view>}<view>
154. <view  v-for="index in 3">
155.         <image :src="image"></image>
156. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
157. </view><view>
158. <view  v-for="index in 3">
159.         <image :src="image"></image>
160. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
161. </view>})<view>
162. <view  v-for="index in 3">
163.         <image :src="image"></image>
164. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
165. </view>}},

复制代码

新闻文章案例

列表页面

1. <view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view><view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view><view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view><view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view><view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view><view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view><view>
26. <view  v-for="index in 3">
27.         <image :src="image"></image>
28. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
29. </view><view>
30. <view  v-for="index in 3">
31.         <image :src="image"></image>
32. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
33. </view><view>
34. <view  v-for="index in 3">
35.         <image :src="image"></image>
36. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
37. </view><view>
38. <view  v-for="index in 3">
39.         <image :src="image"></image>
40. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
41. </view>{{item.title}}<view>
42. <view  v-for="index in 3">
43.         <image :src="image"></image>
44. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
45. </view><view>
46. <view  v-for="index in 3">
47.         <image :src="image"></image>
48. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
49. </view><view>
50. <view  v-for="index in 3">
51.         <image :src="image"></image>
52. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
53. </view><view>
54. <view  v-for="index in 3">
55.         <image :src="image"></image>
56. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
57. </view>{{item.body}}<view>
58. <view  v-for="index in 3">
59.         <image :src="image"></image>
60. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
61. </view><view>
62. <view  v-for="index in 3">
63.         <image :src="image"></image>
64. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
65. </view><view>
66. <view  v-for="index in 3">
67.         <image :src="image"></image>
68. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
69. </view><view>
70. <view  v-for="index in 3">
71.         <image :src="image"></image>
72. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
73. </view><view>
74. <view  v-for="index in 3">
75.         <image :src="image"></image>
76. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
77. </view><view>
78. <view  v-for="index in 3">
79.         <image :src="image"></image>
80. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
81. </view>

复制代码

1. <view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view><view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view><view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view><view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view><view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view><view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view>{{articleDetail.title}}<view>
26. <view  v-for="index in 3">
27.         <image :src="image"></image>
28. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
29. </view><view>
30. <view  v-for="index in 3">
31.         <image :src="image"></image>
32. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
33. </view><view>
34. <view  v-for="index in 3">
35.         <image :src="image"></image>
36. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
37. </view>{{articleDetail.content}}<view>
38. <view  v-for="index in 3">
39.         <image :src="image"></image>
40. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
41. </view><view>
42. <view  v-for="index in 3">
43.         <image :src="image"></image>
44. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
45. </view><view>
46. <view  v-for="index in 3">
47.         <image :src="image"></image>
48. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
49. </view><view>
50. <view  v-for="index in 3">
51.         <image :src="image"></image>
52. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
53. </view><view>
54. <view  v-for="index in 3">
55.         <image :src="image"></image>
56. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
57. </view><view>
58. <view  v-for="index in 3">
59.         <image :src="image"></image>
60. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
61. </view><view>
62. <view  v-for="index in 3">
63.         <image :src="image"></image>
64. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
65. </view>评论<swiper indicator-dots >
66. <view>
67. <view  v-for="index in 3">
68.         <image :src="image"></image>
69. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
70. </view><swiper-item>
71. <view>
72. <view  v-for="index in 3">
73.         <image :src="image"></image>
74. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
75. </view><view>
76. <view  v-for="index in 3">
77.         <image :src="image"></image>
78. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
79. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
80. <view>
81. <view  v-for="index in 3">
82.         <image :src="image"></image>
83. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
84. </view></swiper-item>
85. <view>
86. <view  v-for="index in 3">
87.         <image :src="image"></image>
88. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
89. </view><swiper-item>
90. <view>
91. <view  v-for="index in 3">
92.         <image :src="image"></image>
93. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
94. </view><view>
95. <view  v-for="index in 3">
96.         <image :src="image"></image>
97. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
98. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
99. <view>
100. <view  v-for="index in 3">
101.         <image :src="image"></image>
102. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
103. </view></swiper-item>
104. <view>
105. <view  v-for="index in 3">
106.         <image :src="image"></image>
107. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
108. </view><swiper-item>
109. <view>
110. <view  v-for="index in 3">
111.         <image :src="image"></image>
112. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
113. </view><view>
114. <view  v-for="index in 3">
115.         <image :src="image"></image>
116. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
117. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
118. <view>
119. <view  v-for="index in 3">
120.         <image :src="image"></image>
121. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
122. </view></swiper-item>
123. </swiper>{{item.name}}<view>
124. <view  v-for="index in 3">
125.         <image :src="image"></image>
126. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
127. </view><view>
128. <view  v-for="index in 3">
129.         <image :src="image"></image>
130. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
131. </view><view>
132. <view  v-for="index in 3">
133.         <image :src="image"></image>
134. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
135. </view><view>
136. <view  v-for="index in 3">
137.         <image :src="image"></image>
138. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
139. </view><view>
140. <view  v-for="index in 3">
141.         <image :src="image"></image>
142. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
143. </view>{{item.email}}<view>
144. <view  v-for="index in 3">
145.         <image :src="image"></image>
146. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
147. </view><view>
148. <view  v-for="index in 3">
149.         <image :src="image"></image>
150. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
151. </view><view>
152. <view  v-for="index in 3">
153.         <image :src="image"></image>
154. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
155. </view><view>
156. <view  v-for="index in 3">
157.         <image :src="image"></image>
158. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
159. </view><view>
160. <view  v-for="index in 3">
161.         <image :src="image"></image>
162. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
163. </view><view>
164. <view  v-for="index in 3">
165.         <image :src="image"></image>
166. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
167. </view><view>
168. <view  v-for="index in 3">
169.         <image :src="image"></image>
170. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
171. </view><view>
172. <view  v-for="index in 3">
173.         <image :src="image"></image>
174. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
175. </view>{{item.body}}<view>
176. <view  v-for="index in 3">
177.         <image :src="image"></image>
178. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
179. </view><view>
180. <view  v-for="index in 3">
181.         <image :src="image"></image>
182. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
183. </view><view>
184. <view  v-for="index in 3">
185.         <image :src="image"></image>
186. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
187. </view><view>
188. <view  v-for="index in 3">
189.         <image :src="image"></image>
190. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
191. </view><view>
192. <view  v-for="index in 3">
193.         <image :src="image"></image>
194. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
195. </view><view>
196. <view  v-for="index in 3">
197.         <image :src="image"></image>
198. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
199. </view>

复制代码

问题

图片遮住其他内容

解决方法：
z-index 较大的重叠元素会覆盖较小的元素
对导航栏样式设置: z-index: 10;
vue中返回false场景

false：布尔值 false 自然是假值。
0：数字 0 被视为假值。
""（空字符串）：空字符串被视为假值。
null：空值 null 被视为假值。
undefined：未定义值 undefined 被视为假值。
NaN：非数字值 NaN（Not-a-Number）被视为假值。
接口QPS小，频繁请求导致500的问题

getNavData和getNews调用后端接口，由于接口的QPS为1，两个方法为异步请求，导致getNews中调用接口500，在调用getNavData后，睡眠1.5s然后执行getNews方法，避免QPS小的问题

1. onLoad() {<view>
2. <view  v-for="index in 3">
3.         <image :src="image"></image>
4. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
5. </view>this.news = [];<view>
6. <view  v-for="index in 3">
7.         <image :src="image"></image>
8. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
9. </view>this.getNavData();<view>
10. <view  v-for="index in 3">
11.         <image :src="image"></image>
12. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
13. </view>setTimeout(() => {<view>
14. <view  v-for="index in 3">
15.         <image :src="image"></image>
16. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
17. </view><view>
18. <view  v-for="index in 3">
19.         <image :src="image"></image>
20. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
21. </view>this.getNews();<view>
22. <view  v-for="index in 3">
23.         <image :src="image"></image>
24. </view><image  src="/static/img/小猫测试.jpeg" mode="aspectFill"></image>
25. </view>}, 1500)},

复制代码

开发新闻应用

代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！