<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

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

	<title>vue</title>

	<link rel="stylesheet" href="">

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

	<!-- <script type="text/javascript" src="../js/vue.js"></script> -->

</head>

<body>

	<div id="vue">

		<input type="text" v-model="n1">+

		<input type="text" v-model="n2">=

		<input type="text" v-model="sum">

	</div>

</body>

<script type="text/javascript">

	var app=new Vue({

		el:'#vue',

		computed:{

//		    写法一:

		    sum:function(){

		        //*1 是把字符串转为数字型 用this会从data里找变量

		        return this.n1*1+this.n2*1;

			}

//			写法二:

//			sum(){

//				return this.n1*1+this.n2*1

//			}

		},

		data:{

		  n1:0,

		  n2:0,

		}

	});

</script>

</html>

效果:

06.VUE学习之非常实用的计算属性computed实例的更多相关文章

  1. 007——VUE中非常使用的计算属性computed实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue从入门到进阶：计算属性computed与侦听器watch（三）

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  3. vue学习-第三个DEMO(计算属性和监视) v-model基础用法

    <div id="demo"> 姓:<input type="text" placeholder="First Name" ...

  4. VUE -- Vue.js每天必学之计算属性computed与$watch

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...

  5. Vue.js基本规则提炼总结及计算属性学习

    Vue.js基本须知: 1)以“{{}}”格式 “Mustache” 语法(双大括号)来绑定表达式输出文本值; 2)以“{{{}}}”格式绑定原始的html,绑定的表达式内为字符串格式的html内容, ...

  6. Vue学习3：计算属性computed与监听器

    下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  7. Vue.js-05：第五章 - 计算属性与监听器

    一.前言 在 Vue 中,我们可以很方便的将数据使用插值表达式( Mustache 语法)的方式渲染到页面元素中,但是插值表达式的设计初衷是用于简单运算,即我们不应该对差值做过多的操作.当我们需要对差 ...

  8. Vue(基础三)_监听器与计算属性

    一.前言 本文主要涉及:     1.watch()监听单个属性 2.computed可以监听多个属性 3.点击li标签切换音乐案例 二.主要内容 1.watch()监听器(监听单一数据) (1)监听 ...

  9. 温故vue对vue计算属性computed的分析

    vue 复习笔记(1)一段时间没有看过vue的官方文档了,温故而知新,所以我决定将vue的文档在看一遍 1计算属性computed在vue的computed中声明的是计算属性,可以使用箭头函数来进行定 ...

随机推荐

  1. lecture-7 递归

    1.例题--排列 Permutation Given a collection of distinct numbers, return all possible permutations.For ex ...

  2. C 碎片九 预处理&位运算&文件操作

    一.预处理 预处理语句:#开头的语句,在预处理阶段处理预处理语句.包括宏定义.文件包含处理.条件编译 1, 宏定义 1. 不带参数宏定义:#define 标识符  字符串 #define PI 3.1 ...

  3. form自动提交

    在做项目中,例如b2b的由商城跳往卖家中心的后台,当他既有会员账号又是卖家的时候,让他登录了商城,就不需要卖家登录的时候,处理过程中可以用到form表单自动登录. 实现简单思路:可以再普通会员登录的地 ...

  4. C#启动或停止 计算机中“服务”

    第一.要添加一个引用System.ServiceProcess 第二.要在程序中使用命名空间ServiceProcess 代码片段: using System.ServiceProcess; Serv ...

  5. linux下如何实现mysql数据库定时自动备份

    概述   备份是容灾的基础,是指为防止系统出现操作失误或系统故障导致数据丢失,而将全部或部分数据集合从应用主机的硬盘或阵列复制到其它的存储介质的过程.而对于一些网站.系统来说,数据库就是一切,所以做好 ...

  6. pta 编程题20 旅游规划

    其它pta数据结构编程题请参见:pta 题目 这个最短路径问题只需要求两点之间的最短路径,因而在Dijikstra算法中当求出目标点的最短路径之后跳出循环即可. #include <iostre ...

  7. codeforce Gym 100425E The Street Escalator（期望，线性递推）

    算数学期望,每个人都可以分开来考虑.Xi表示第i个人跑到另外一边的次数. Xi服从二项分布.概率的和是个二项式,(p+1-p)^T,把二项式展开,p的偶次项是留在原来那一边的概率. 可以用((a+b) ...

  8. Android（java）学习笔记76：Handler用法总结 和 秒表案例

    一.Handler的定义: Handler主要接收子线程发送的数据, 并用此数据配合主线程更新UI,用来跟UI主线程交互用.比如可以用handler发送一个message,然后在handler的线程中 ...

  9. ELF文件的格式和加载过程

    http://blog.csdn.net/lingfong_cool/article/details/7832896 (一) ELF 文件的格式       ELF 文件类型 (1) 可重定位文件(  ...

  10. 2dsphere索引

    概念:球面地理位置索引 创建方式: db.collection.ensureIndex({w:'2dsphere'}) wdspere中,位置的表示方式不再是简单的经度,纬度,数组,而是变成一种复杂的 ...