<divid="app"><h1>{{ msg }}</h1><!-- v-for="item in items" --><!-- 遍历的对象: 数组[] 对象(字典){} --><ul><li>{{ list[0] }}</li><li>{{ list[1] }}</li><li>{{ list[2] }}</li><li>{{ list[3] }}</li><li>{{ list[4] }}</li></ul><!-- n为遍历的元素值 --><ul><liv-for="n in list">{{ n }}</li></ul><!-- 一般列表渲染需要建立缓存 --><!-- 列表渲染是循环,需要赋值变量给key,使用key需要v-bind:处理 --><!-- v-for变量数组[]时,接收两个值时,第一个为元素值,第二个为元素索引 --><ul><liv-for="(n, i) in list":key="i">value:{{ n }} | index: {{ i }}</li></ul><ul><li>{{ dic['name'] }}</li><li>{{ dic.age }}</li><li>{{ dic.gender }}</li></ul><!-- v-for变量对象{}时,接收三个值时,第一个为元素值,第二个为元素键,第三个为元素索引 --><ul><liv-for="(v, k, i) in dic":key="k">value:{{ v }} | key:{{ k }} | index: {{ i }}</li></ul><!-- 遍历的嵌套 --><divv-for="(person, index) in persons":key="index"style="height:21px;"><divv-for="(v, k) in person":key="k"style="float: left;">{{ k }} : {{ v }} </div></div></div><scripttype="text/javascript">newVue({el:"#app",data:{msg:"列表渲染",list:[1,2,3,4,5],dic:{name:'zero',age:88888,gender:'god'},persons:[{name:"zero",age:8},{name:"egon",age:78},{name:"liuXX",age:77},{name:"yXX",age:38}]}})</script>
todolist案例
<divid="app"><div><inputtype="text"v-model="val"><buttontype="button" @click="submitMsg">提交</button></div><ul><liv-for="(v, i) in list":key="i" @click="removeMsg(i)">{{ v }}</li></ul>
{{ list }}
</div><scripttype="text/javascript">newVue({el:"#app",data:{val:"",list:[]},methods:{
submitMsg (){if(this.val){this.list.push(this.val);this.val=""}},removeMsg(index){this.list.splice(index,1)}}})</script>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!