vue-cli2 和vue-cli3
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的更多相关文章
- vue/cli2.0优化
vue/cli2.0 脚手架 在项目写完了之后, 运行npm run build --report可以看出这个项目的资源占比情况.可以看出整个项目哪一个资源在整个项目占比最大.它会自动打开一个可视化的 ...
- Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- 用TypeScript开发Vue——如何通过vue实例化对象访问实际ViewModel对象
用TypeScript开发Vue--如何通过vue实例化对象访问实际ViewModel对象 背景 我个人很喜欢TypeScript也很喜欢Vue,但在两者共同使用的时候遇到一个问题. Vue的实例化对 ...
- vue学习之vue基本功能初探
vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- Vue.js之Vue计算属性、侦听器、样式绑定
前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...
- Vue之初识Vue
前言 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维, 因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和 数据 ...
- Vue Admin - 基于 Vue & Bulma 后台管理面板
Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组 ...
随机推荐
- pipline中使用ansible
实验架构: 192.168.0.96 gitlab 192.168.0.97 jenkins.ansible 192.168.0.98 harbor.docker集群 说明:下面代码编译镜像那一步的代 ...
- Docker之使用Docker-compose搭建LNMP环境
之前有随笔介绍使用Docker-compose搭建LNMP环境(centos6 php5.6) https://www.cnblogs.com/minseo/p/10146982.html 本文介绍D ...
- Appium移动自动化测试-----（六）1.appium-desktop下载安装
Appium 移动测试中有个很重新的组件 Appium-Server,它主要用来监听我们的移动设备(真机或模拟器),然将不同编程语言编写的 appium 测试脚本进行解析,然后,驱动移动设备来运行测试 ...
- Qt 编译出错“undefined reference to `vtable for”
1. 有时,如果将某个类改为继承自QObject类(以前不继承自该类),编译时会出错. 解决: clean Project, run qmake, rebulid都运行一遍,好了! 因为qmake生成 ...
- 《ucore lab1 exercise6》实验报告
资源 ucore在线实验指导书 我的ucore实验代码 题目:完善中断初始化和处理 请完成编码工作和回答如下问题: 中断描述符表(也可简称为保护模式下的中断向量表)中一个表项占多少字节?其中哪几位代表 ...
- 如何用C++实现栈
栈的定义 栈(stack)又名堆栈,它是一种运算受限的线性表.限定仅在表尾进行插入和删除操作的线性表.这一端被称为栈顶,相对地,把另一端称为栈底.向一个栈插入新元素又称作进栈.入栈或压栈,它是把新元素 ...
- [转帖]HAProxy 7层 负载均衡
HAProxy 7层 负载均衡 https://www.cnblogs.com/jicki/p/5546902.html HAProxy 系统 CentOS 5.8 x64 wget http://h ...
- Java 发送http GET/POST请求
最近项目里面需要用到Java发送http请求,由于发送https请求有点复杂,暂时不考虑 HttpURLConnection HttpURLConnection是一种多用途.轻量极的HTTP客户端,使 ...
- Git服务器搭建--ssh/http
测试环境 Windows 7 Ultimate, 64-bit 6.1.7601, Service Pack 1(实体机,虚拟机VMware的宿主机) VMware® Workstation 7.1. ...
- 【leecode】 Course Schedule
class Solution { public: static bool canFinish(int numCourses, vector<pair<int, int>>&am ...