vue-cli2 和vue-cli3

https://www.cnblogs.com/zhanvo/p/10963776.html

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  </head>

  <body>

    <div id="app">

      <div>

        <input type="button" value="add person" @click="add" />

        <div>

          <span>平均年龄:{{ average }}</span>

        </div>

        <div

          v-for="item of users"

          :key="name"

          style="margin-top: 10px; border-bottom: 1px solid"

        >

          <div><span>姓名</span> <input type="text" v-model="item.name" /></div>

          <div><span>年龄</span> <input type="text" v-model="item.age" /></div>

        </div>

      </div>

    </div>

  </body>

  <script>

    var app = new Vue({

      el: '#app',

      data() {

        return {

          users: [{ name: 'robin', age: 18 }, { name: 'terry', age: 30 }]

        }

      },

      methods: {

        add: function() {

          this.users.push({ name: null, age: null })

        }

      },

      computed: {

        average() {

          return parseInt(

            this.users.reduce((total, current) => {

              return total + parseInt(current.age ? current.age : 0)

            }, 0) / this.users.length

          )

        }

      }

    })

  </script>

</html>

　　

vue-cli2 和vue-cli3的更多相关文章

  1. vue/cli2.0优化

    vue/cli2.0 脚手架 在项目写完了之后, 运行npm run build --report可以看出这个项目的资源占比情况.可以看出整个项目哪一个资源在整个项目占比最大.它会自动打开一个可视化的 ...

  2. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  3. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  4. 用TypeScript开发Vue——如何通过vue实例化对象访问实际ViewModel对象

    用TypeScript开发Vue--如何通过vue实例化对象访问实际ViewModel对象 背景 我个人很喜欢TypeScript也很喜欢Vue,但在两者共同使用的时候遇到一个问题. Vue的实例化对 ...

  5. vue学习之vue基本功能初探

    vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...

  6. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  7. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

  8. Vue.js之Vue计算属性、侦听器、样式绑定

    前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...

  9. Vue之初识Vue

    前言 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维, 因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和 数据 ...

  10. Vue Admin - 基于 Vue & Bulma 后台管理面板

    Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组 ...

随机推荐

  1. 如何使用Xshell秘钥认证登录CentOS(无密码登录)

    https://www.linuxidc.com/Linux/2016-06/132268.htm

  2. selenium3+Python3+sublime text3自动化登录

    前言: 对于初学者来说,python自带的IDLE,精简又方便,不过一个好的编辑器能让python编码变得更方便,更加优美些. 不过呢,也可以自己去下载其他更好用的代码编辑器,在这推荐: PyChar ...

  3. H310C，B365，M.2 NVME SSD，USB3.0，安装 WIN7 64 位

    华擎H310CM ITX NVME SSD 上安装WIN7 64位 核心关键点:xHCI USB3.0驱动,nvme驱动,nvme win7补丁. 硬件配置:I5 9400F, 华擎H310CM IT ...

  4. scrapy,Twisted,pywin32安装

    安装包链接   百度云下载    https://pan.baidu.com/s/1V191nOtEDInxd_fkyi5siQ&shfl=sharepset Linux pip3 insta ...

  5. idea的maven依赖本地jar

    可以手动添加jar,但是idea手动添加jar时,有时候不行. 用maven依赖本地jar方法,感觉比较正规,不会因为自己忘记手动添加jar. 比如这个达梦数据库依赖 <dependency&g ...

  6. pandas对时间列分组求diff遇到的问题

    例子: df = pd.DataFrame() df['A'] = [1, 1, 2] df['B'] = [datetime.date(2018, 1, 2), datetime.date(2018 ...

  7. 软件素材---C/C++格式化显示当前时间--标准函数strftime

    函数原型:size_t strftime (char* ptr, size_t maxsize, const char* format,const struct tm* timeptr ); 头文件: ...

  8. [转帖]TPC-C解析系列02_OceanBase如何做TPC-C测试

    TPC-C解析系列02_OceanBase如何做TPC-C测试 http://www.itpub.net/2019/10/08/3333/   导语: 蚂蚁金服自研数据库OceanBase登顶TPC- ...

  9. [转帖]进程上下文频繁切换导致load average过高

    进程上下文频繁切换导致load average过高 2016年6月26日admin发表评论阅读评论 http://www.361way.com/linux-context-switch/5131.ht ...

  10. 1.IO的演进

      1.Java IO 演进之路 本文围绕着一下几个问题 1.Java 中 BIO.NIO.AIO 之间的区别及应用场景. 2.阻塞(Block)与非阻塞(Non-Block)区别. 3.同步(Syn ...