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 和组 ...
随机推荐
- 【Leetcode_easy】1046. Last Stone Weight
problem 1046. Last Stone Weight 参考 1. Leetcode_easy_1046. Last Stone Weight; 完
- 【Leetcode_easy】1128. Number of Equivalent Domino Pairs
problem 1128. Number of Equivalent Domino Pairs solution1: 不明白为什么每个元素都要加上count: class Solution { pub ...
- Docker - 在CentOS7.5中升级Docker版本
1 - 检查当前版本 [root@localhost ~]# uname -a Linux localhost.localdomain 3.10.0-957.el7.x86_64 #1 SMP Thu ...
- 用ASP.NET Core 2.0 建立规范的 REST API -- 预备知识1
什么是REST REST 是 Representational State Transfer 的缩写. 它是一种架构的风格, 这种风格基于一套预定义的规则, 这些规则描述了网络资源是如何定义和寻址的. ...
- linux和windows换行符的^M问题
起源 在windows中写的脚本执行完全没问题,代码一模一样,切换到linux中执行报错.利用命令 “vi/vim -b 文件名”查看文件发现每行结尾多了“^M”这样的结尾. 根源 通过查询得知,其问 ...
- extract()函数：用于从一个date或者interval类型中截取到特定的部分
extract()函数:用于从一个date或者interval类型中截取到特定的部分 ### extract 语法extract ( { year | month | day | hour | min ...
- 【作业】Mental Rotation （模拟）
题目链接:https://vjudge.net/contest/345791#problem/L [问题描述] Mental rotation is a difficult thing to mast ...
- GWAS中的名称概念
基因: 是指决定生物某一遗传性状的染色体DNA片段 基因型: `基因型`又称`遗传型`,是某一生物个体全部基因组合的总称.它反应生物体的遗传构成,即从双亲获得的全部基因的总和.遗传学中具体使用的基因型 ...
- Word 固定行间距公式图片显示不全、Word Eculid 字体导致行间距过大、Word 行间距过大
1. 前言 1.有些文章行间距要求是固定值,比如,固定值15磅,但是这样会导致有些公式.图片显示不全.例如下图: 2.Euclid这个字体很容易导致行间距超大. 2. 解决方案 1.把固定值15磅改为 ...
- triples I（按位或运算及3的特性）（2019牛客暑期多校训练营（第四场）D）
示例1: 输入: 2 3 7 输出: 1 32 3 6 说明:3=3, (3|6)=7 题意:输出尽可能少的数字,他们的按位或结果为输入的数字a. 题解:(表示看不懂题解,看山东大佬的代码看懂的)首先 ...