博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue2.0入门系列——循环
阅读量:5748 次
发布时间:2019-06-18

本文共 641 字,大约阅读时间需要 2 分钟。

1、需求

点击“添加”按钮,添加数据。

 

以上截图为需求。

 

2、编写代码

源代码如下,

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>v2.0循环</title>

    <script src="./vue.js"></script>

       <script>

         window.οnlοad=function(){

            new Vue({

                   el: '#box',

                      data: {

                         list: ['width','height','border']

                      },

                      methods:{

                         add() {

                              this.list.push('background')

                            }

                      }

               });

         };

       </script>

</head>

<body>

 

       <div id="box">

         <input type="button" value="添加" @click="add">

      <ul>

           <li v-for="(val,index) in list" :key="index">

                 {

{ index }}   -   {
{ val }}

              </li>

         </ul>

       </div>

</body>

</html>

 

测试完成,注意循环语句,保持唯一性。

<li v-for="(val,index) in list" :key="index">

 

转载于:https://www.cnblogs.com/sunnyyangwang/p/10286346.html

你可能感兴趣的文章
spring 事务隔离级别、事务的传播机制
查看>>
个性化推荐研究(三)之用户行为数据
查看>>
以git对照看svn
查看>>
诺基亚地图——谷歌,苹果地图的挑战者
查看>>
java连接mysql数据库 保存中文数据乱码(????) 解决方式
查看>>
想要打造自己的PaaS?看看开源PaaS Rainbond用了哪些开源组件
查看>>
spring自动装配
查看>>
在Nginx服务器上架构Flv流媒体服务器
查看>>
9、显示当前所在目录--pwd
查看>>
Fcitx problem with wps under openbox
查看>>
模拟php curl向远程服务器上传文件
查看>>
一张“神图”看懂单机/集群/热备/磁盘阵列(RAID)
查看>>
动态索引结构和索引更新机制
查看>>
一个牛人给java初学者的建议
查看>>
以C#编写的Socket服务器的Android手机聊天室Demo
查看>>
第7个httpClient 例子--httpclient+jsoup解析
查看>>
link
查看>>
mac系统下安装、启动、停止mongodb
查看>>
简单的广义表实现
查看>>
python处理iis日志——统计页面的访问量
查看>>