#vue循环路由

发布时间:2022-07-01 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了#vue循环路由脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

#vue循环路由

#vue循环路由

 1 <template>
 2     <view class="content">
 3         <view v-for="(item, index) in list" 
 4               :key="index"
 5               class="cell-item"
 6               @click="showDetail(item)"
 7         >{{item.name}}</view>
 8     </view>
 9 </template>
10 
11 <script>
12     export default {
13         data() {
14             return {
15                 list: [
16                     {
17                         name: '页面1',
18                         value: 'html1'
19                     },
20                     {
21                         name: '页面2',
22                         value: 'html2'
23                     },
24                     {
25                         name: '页面3',
26                         value: 'html3'
27                     }
28                 ]
29             }
30         },
31         onLoad() {
32             console.log(111);
33         },
34         methods: {
35             showDetail(item) {
36                 uni.navigateTo({
37                     url: `/pages/examples/${item.value}/${item.value}`
38                 })
39             }
40         }
41     }
42 </script>
43 
44 <style lang="scss">
45     .content {
46         .cell-item {
47             padding: 30rpx;
48             margin: 20rpx;
49             box-shadow: 0 1px 5px #ebedf0;
50             background: #fff;
51         }
52     }
53 </style>
View Code

 

脚本宝典总结

以上是脚本宝典为你收集整理的#vue循环路由全部内容,希望文章能够帮你解决#vue循环路由所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: