09-Vue之本地应用v-for指令-白红宇的个人博客

09-Vue之本地应用v-for指令

发布日期：2021-05-07 13:04:34 浏览次数：10 分类：原创文章

本文共 1516 字，大约阅读时间需要 5 分钟。

1. v-for指令

作用：根据数据生成列表结构
语法：（item，index）in 数据
说明：数组长度的更新会同步到页面上，是响应式的

完整代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><body>       <div id="app">        <input type="button" value="添加" @click='add'>        <input type="button" value="删除" @click='remove'>        <!-- 数组取值 -->        <ul>            <li v-for='item in arrInfo'>                {  {item}}            </li>        </ul>                <!-- 数组下标 -->        <ul>            <li v-for='(item,index) in arrInfo'>               {  {index}} {  {item}}            </li>        </ul>        <!-- 对象数组取值 -->        <ul>            <li v-for='item in dataInfo' v-bind:title='item.name'>               {  {item.name}}            </li>        </ul>    </div>     <!-- 开发环境版本，包含了有帮助的命令行警告 -->     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>     <script>         var app = new Vue({             el:'#app',             data:{                 arrInfo:['名字:大海','年龄:26','城市:大连','职业:测试工程师'],                 dataInfo:[                     {'name':'大海'},                     {'name':'小白'}                    ]             },             methods:{                 add:function(){                     this.dataInfo.push({'name':'浪迹天涯'});                 },                 remove:function(){                    this.dataInfo.shift();                 }                              }         })     </script></body></html>

上一篇：03-selenium元素定位

下一篇：08-Vue之本地应用v-bind指令

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

1. v-for指令

发表评论

最新留言

关于作者

推荐文章