博客
关于我
09-Vue之本地应用v-for指令
阅读量:332 次
发布时间:2019-03-04

本文共 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>

 

转载地址:http://qzle.baihongyu.com/

你可能感兴趣的文章
ArcMap|栅格计算器报错
查看>>
批量把多个csv/txt合成一个csv/txt
查看>>
《小石潭记》古文鉴赏
查看>>
Matlab中有关字符串数组的常见问题解答
查看>>
未定义的变量“py”或函数“py.command”
查看>>
我们,都一样......(句句入心)
查看>>
两个数求最大公约数和最小公倍数的方法和理解
查看>>
总结了一下c/c++函数和变量的命名规则
查看>>
关于构造函数内调用虚函数的问题
查看>>
最短路径问题—Dijkstra算法
查看>>
求二叉树的深度
查看>>
录音功能
查看>>
c++面经基础知识汇总(类型转换、new/delete/malloc/free、什么是RTTI)
查看>>
mysql时间相关函数和操作
查看>>
前端基础css样式
查看>>
万物皆可爬系列查看翻页翻到最后是什么
查看>>
python scrapy
查看>>
搜索的原理
查看>>
pymongo的使用
查看>>
nodejs web framework
查看>>