weex 第一个小程序

最新推荐文章于 2022-11-28 18:15:18 发布

五柳--先生

最新推荐文章于 2022-11-28 18:15:18 发布

阅读量2.9k

点赞数

分类专栏： weex

本文链接：https://blog.csdn.net/codingandroid/article/details/77333871

版权

weex 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

环境开发完毕，那么就要来写一个小程序来看一看weex怎么写页面了，可以选择的IDE比较多，我选择的是微软的 visual studio code

可以看到这里 weex 的vue 使用的是相当标准的vue 语法，以及vue的mvvm框架

那么我们就实现一个小小的 1-100 的list展示

weex 最简单 list 折叠源码

 
           <template> 
          
           <div class= 
           "wrapper" 
           > 
          
           <list> 
          
           <cell  v- 
           for 
           = 
           "num in lists" 
           > 
          
           <text class= 
           "text" 
           >这是第{{num}}条数据</text> 
          
           </cell> 
          
           </list> 
          
           </div> 
          
           </template> 
          
           <style> 
          
           .wrapper {  } 
          
           .text { 
          
           font-size: 35px; 
          
           text-align: center; 
          
           color:  
           #41B883; 
          
           } 
          
           </style> 
          
           <script> 
          
           export  
           default  
           { 
          
           data: { 
          
           lists:[] 
          
           }, 
          
           created(){ 
          
           for 
           ( 
           var  
           i=0;i<100;i++){ 
          
           this 
           .lists.push(i+1+ 
           '' 
           ) 
          
           } 
          
           } 
          
           } 
          
           </script>