<!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. Java日志格式应该是占位符还是字符串拼接

    背景 ​ 上次在群中,有个群友说自己把所有项目中,所有使用占位符打印日志的方式都修改成为了字符串拼接的方式,因为他曾经看了一篇文章,说字符串拼接的形式比占位符形式的性能更好,这个话题引起了大家的广泛讨 ...

  2. 与 HTML4 比较，HTML5 废弃了哪些元素？

    frame frameset noframe applet big center basefront

  3. OpenStack Ocata Telemetry 警告服务部署

    下列操作在控制节点上进行: 1 准备条件 在配置OpenStack Telemetry服务之前,你必须创建数据库.服务凭证和API端点. 1.1 数据库 以root用户连接数据库服务器,创建glanc ...

  4. 从零开始的全栈工程师——html篇1.6

    浮动与伪类选择器 一.浮动(float) 1.标准文档流 标准文档流是一种默认的状态 浏览器的排版是根据元素的特征(块和行级) 从上往下 从左往右排版 这就是标准文档流 2.浮动(float)floa ...

  5. RxJava 1升级到RxJava 2过程中踩过的一些“坑”

    RxJava2介绍 RxJava2 发布已经有一段时间了,是对 RxJava 的一次重大的升级,由于我的一个库cv4j使用了 RxJava2 来尝鲜,但是 RxJava2 跟 RxJava1 是不能同 ...

  6. wechat开发笔记之1.接口示例代码

    修改后的php示例代码! <?php /** * wechat php test */ //define your token define("TOKEN", "w ...

  7. LeetCode Unique Binary Search Trees （DP）

    题意: 一棵BST有n个节点,每个节点的key刚好为1-n.问此树有多少种不同形态? 思路: 提示是动态规划. 考虑一颗有n个节点的BST和有n-1个节点的BST.从n-1到n只是增加了一个点n,那么 ...

  8. 流媒体 6——MPEG电视

    1.电视图像的数据率 1.1 ITU-R BT.601标准数据率 按照奈奎斯特(Nyquist)采样理论,模拟电视信号经过采样(把连续的时间信号变成离散的时间信号)和量化 (把连续的幅度变成离散的幅度 ...

  9. JAVA设计模式初探之桥接模式

    生活中的一个例子:    拿汽车在路上行驶的来说.既有小汽车又有公共汽车,它们都不但能在市区中的公路上行驶,也能在高速公路上行驶.这你会发现,对于交通工具(汽车)有不同的类型,它们所行驶的环境(路)也 ...

  10. 【BZOJ2141】排队

    点此看题面 大致题意: 给你一个序列,每次交换两个数,求每次操作后的逆序对个数. 关于另一道题目 推荐先去看一下这道题目:[洛谷3759][TJOI2017] 不勤劳的图书管理员(貌似是此题的升级版) ...