<!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. Abbreviation ---- hackerrank

    ---恢复内容开始--- https://www.hackerrank.com/contests/world-codesprint-6/challenges/abbr 给定两个串str和sub. 对于 ...

  2. $.ajax和$.load的区别

    http://lib.csdn.net/article/jquery/35614?knId=646

  3. 1 误删dbf文件造成ORA-01109: 数据库未打开.

    1.cmd-sqlplus /nolog-conn system/pwd as sysdba 2.shutdown immediate; 3.startup mount; 4.alter databa ...

  4. 【Java/Android性能优 7】Android公共库——图片缓存 网络缓存 下拉及底部更多ListView 公共类

    本文转自:http://www.trinea.cn/android/android-common-lib/ 介绍总结的一些android公共库,包含缓存(图片缓存.预取缓存.网络缓存).公共View( ...

  5. 用C#来控制高级安全Windows防火墙

    有的时候我们需要在自己的产品中检测<高级安全Windows防火墙>的状态,并有可能需要加入一些规则甚至需要关闭掉高级安全Windows防火墙. 下面就告诉如何来做: <高级安全Win ...

  6. 9.26<立方网>技术笔试题

    该公司题目感觉不难,算法设计有三道大题. 1.设有m和n两个整数,求它们的最大公约数和最小公倍数. 2.猴子分桃问题,每次分桃多一个,共有五个猴子,问最少有多少个桃子. 3.关于java的题目,有A, ...

  7. Myeclipse 突然打不开的问题

    用的好好的Myeclipse今天突然打不开了,打开myeclipse提示 :an error has occurred  see the log file 然后我打开日志文件,看到如下的报错信息: ! ...

  8. MySQL-数据类型及选择

    一.数据类型 详见:http://www.runoob.com/mysql/mysql-data-types.html 二.类型选择 整形>date,time>enum,char>v ...

  9. dac verilog ad5601

    首先从官网下载数据手册.DAC有串行有并行,ad5601是串行,(需要好多时钟沿的移位内部转换为并行在输出). 按照手册的时序编写程序, 关注下芯片的波特率范围 看看手册的数据传输那些事有效的数据位 ...

  10. HDU1664 BFS + 数论 + 剪枝

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1664 , 一道比较蛋疼的搜索题. 这道题有很多坑点,一点处理不好就要TLE. 题意很简单,就是找到一个 ...