06.VUE学习之非常实用的计算属性computed实例

<!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>

效果:

原文地址:https://www.cnblogs.com/haima/p/10223512.html

时间: 2024-10-09 23:49:29

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

Vue.js 基础学习计算属性computed

我们要写一个成绩表如下 数学 90 物理 80 英语 70 <div id="app"> <table border="1"> <tr> <td>数学</td> <td>{{ math }}</td> </tr> <tr> <td>物理</td> <td>{{ physics }}</td> </tr>

怎样理解 Vue 中的计算属性 computed 和 methods ?

需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实并不好. 最理想的情况是: html 只负责展示, 绑定的数据都是 赤裸裸 的 变量, 而非 表达式 , 这样就会比较人性化. 想要达到这种效果可以有两种方法: computed 和 methods. 1. 使用 methods 相当于是为这个 字符串倒序 的功能单独写了一个函数, 这个函数在 Vu

vue2.0中的watch和计算属性computed

watch和computed均可以监控程序员想要监控的对象,当这些对象发生改变之后,可以触发回调函数做一些逻辑处理 watch监控自身属性变化 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></

计算属性computed与methods

计算属性computed与methods的区别:首先是使用methods如果执行了一个函数.那么它里面的全部函数都会执行.但是使用计算属性就不一样,它只是单对单的执行,不会去执行你不要执行的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid

vue.js基础知识篇(3):计算属性、表单控件绑定

第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="example"> <

vue.js的计算属性computed

对于计算属性里关联的对象,即使对象不是组件作用域内的,当对象在外部改变了某个属性,同样会发出计算属性的方法. computed:{ noCheckeLength:function(){ return this.list.filter(function(item){ return !item.isChecked }).length } }, item.isChecked是input{type="checkbox"}的value值,当在页面点击勾选或者去掉勾选,则item.isChecke

swift学习笔记之--类的计算属性

1,Swift中类可以使用计算属性,即使用get和set来间接获取/改变其他属性的值,代码如下 class Calcuator{ var a:Int = 1; var b:Int = 1; var sum:Int{ get{ return a + b } set(val){ b = val - a } } } let cal = Calcuator(); print(cal.sum) //2 cal.sum = 5 print(cal.b) //4 2,对于set有简写方法,简写时,新赋的值默认

计算属性 computed:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <p>原来的小数: {{ float_number }}</p> <p>

VueJS计算属性: computed

computed属性 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </h