文档章节

Vue.js数据驱动的简单例子

momo1987
 momo1987
发布于 2016/11/14 14:50
字数 175
阅读 32
收藏 1
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue.js demo</title>
  <style>
    table{
      width: 100%;
      border:1px solid #ccc;
      border-collapse: collapse;
      border-spacing: 0;
      text-align: center;
    }
    td{
      border:1px solid #ccc;
    }
    .opt-bar{
      padding: 1em 0;
      text-align: center;
    }
    .opt-bar button{
      margin: 0 1em;
    }
  </style>
</head>
<body>
  <div id="app">
    <table>
      <tr v-for="item in listData">
        <td>{{item.user}}</td>
        <td>{{item.sex}}</td>
        <td>{{item.age}}</td>
      </tr>
    </table>
    <div class="opt-bar">
      <button @click="delLastOne">删除一条</button>
      <button @click="addOne">添加一条</button>
    </div>
  </div>
</body>
<script src="http://cdn.bootcss.com/vue/2.0.5/vue.min.js"></script>
<script>
  (function(){
    var vm = new Vue({
      el : "#app",
      data:{
        listData : [
          {
            user : 'Cary',
            sex  : 'male',
            age  :  '21'
          },{
            user : 'Shelly',
            sex  : 'female',
            age  :  '18'
          },{
            user : 'Ava',
            sex  : 'female',
            age  :  '28'
          }
        ]
      },
      methods:{
        //删除添加就是数组或对象的添加或删除,记住”数据驱动“
        delLastOne:function(){
          this.listData = this.listData.slice(1);
        },
        addOne : function(){
          this.listData.push({
            user : 'Eywa',
            sex  : 'female',
            age  :  '24'
          });
        }
      }
    });
  })();
</script>
</html>

 

© 著作权归作者所有

上一篇: 使用AdminLTE
下一篇: Chrome开发用插件
momo1987
粉丝 1
博文 61
码字总数 13737
作品 0
深圳
私信 提问
小白教程|一小时上手最流行的前端框架vue

前言 vue是现在很火的一个前端MVVM框架,它以数据驱动和组件化的思想构建,与angular和react并称前端三大框架。相比angular和react,vue更加轻巧、高性能、也很容易上手。大家也可以移步vue...

全栈社区
04/08
0
0
【重学Vue】数据响应原理真的是双向绑定吗?

最近 Ant Design Vue 作者 - 唐金州,在某平台开课了,在整个课程中系统的讲述了Vue的开发实战。在第八讲中介绍了Vue双向绑定的问题,这里我整理一些资料客观的分析一下 Vue数据响应原理到底...

D文斌
03/23
0
0
Vue常用经典开源项目汇总参考-海量

Vue常用经典开源项目汇总参考-海量   Vue是什么?   Vue.js(读音 /vju/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。...

80368704
2018/06/29
0
0
TS与JS中的Getters和Setter究竟有什么用

作者:Khalil Stemmler 翻译:疯狂的技术宅 原文:www.freecodecamp.org/news/typesc… 未经允许严禁转载 在本文中,我们讨论了getter 和 setter 在现代 Web 开发中的实用性。它们有用吗?什...

前端先锋
07/09
0
0
好程序员web前端分享MVVM框架Vue实现原理

  好程序员web前端分享MVVM框架Vue实现原理,Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js和react.js更加简洁、更易于理解的API,使得...

好程序员IT
05/31
15
0

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
5
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
昨天
6
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部