微信小程序的wx:for和vue的v-for
生活随笔
收集整理的這篇文章主要介紹了
微信小程序的wx:for和vue的v-for
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
寫代碼的時候，微信小程序的wx:for和vue的v-for，有點搞混了，所以特意舉個簡單的例子(todos)來區(qū)分下。
微信小程序
- index.wxml
- index.wxss
- index.js
要回憶更多內(nèi)容，可以到這里看看。
Vue
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@next"></script> </head> <body><div id="root"><ul class="list"><li class="item" v-for="(item,index) in todos" :key="item.id">{{item.id}}-{{item.title}}</li></ul></div><script>const app = Vue.createApp({data(){return {todos:[{title:"吃飯",id:"1"},{title:"睡覺",id:"2"},{title:"打豆豆",id:"3"}]}}})app.mount("#root");</script> </body> </html>
關(guān)于Vue的v-for，更多可以訪問這里。
總結(jié)
以上是生活随笔為你收集整理的微信小程序的wx:for和vue的v-for的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 试着用markdown
- 下一篇： Vue - 网站首屏加载等待动画（极简解