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 和组 ...
随机推荐
- Win10安装Golang
首先去这个网站下载Golang的安装包:https://studygolang.com/dl 因为我的系统是Win10专业版64位,所以我选择了对应的Windows的安装包进行下载: 下载好安装包之后 ...
- 【ARTS】01_46_左耳听风-201900923~201900929
ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...
- MySQL的join on和 where 的执行顺序和区别，以及各种连接说明
目录 1.各种连接的解读说明: 1.1.各种连接的含义和说明 1.1.1 所有连接分类 1.1.2 left join 和 left outer join 区别 1.2.神图参考 1.4.一些参考说明 ...
- Clean Code 代码检查清单
注释: 不恰当的信息:注释只应该描述有关代码和设计的技术性信息. 废弃的注释:过时.无关或不正确的注释就是废弃的注释. 冗余注释:注释应该谈及代码自身没提到的东西 糟糕的注释:值得编写的注释,也值得好 ...
- R去掉含有NA的行
只要数据框中含有NA的行都去掉 final[complete.cases(final),] na.omit(final) 过滤某几列 final[complete.cases(final[,5:6]) ...
- SSH无密码（密钥验证）登录的配置
进入到我的home目录 cd ~/.ssh [root@shtppATTSTPUBv03 home]# cd ~/.ssh [root@shtppATTSTPUBv03 .ssh]# pwd /roo ...
- [.Net Core] - 使用 NLog 记录日志到 Sql Server
1. 使用 Nuget 安装 NLog. 2. 在 Sql Server 中创建 NLog 数据表. CREATE TABLE [dbo].[NLogInfo]( ,) NOT NULL, [Date ...
- [PDF] - 获取 RadioButtonList 控件值的方法
背景 目标是通过 iTextSharp 读取 PDF 模板,填充内容后以生成新 PDF 文件.利用 福昕PDF编辑器个人版 可以获取到 RadioButtonList 的组名,但是获取不到每一个 Ra ...
- visio 绘图素材
1. 前言 visio是个绘图的好工具,可是自带图形元素有限,没有还要自己画. 推荐几个矢量图形素材库,里边有很多图形,很方便的导入到visio中,放大也不失真. 阿里巴巴矢量图库网 stockio ...
- php面向对象之封装
OOP三大特性:封装.继承和多态,简称封继态. 封装 类2使用关键字extends继承类1,之后,类1为类2的父类,简称父类,类2是类1的子类,简称子类.使用关键字new,实例化类1,得到对象1,对象 ...