本文共 1516 字，大约阅读时间需要 5 分钟。
完整代码
<!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/