uni-app 计算属性 computed

功能:=》大于1000用kg表示 小于1000,用g表示

    计算属性  计算属性必须是有一个返回值的哦
    在html写被计算的值
    在computed中去直接调用哈
        <view>
            <text>{{jisuweight}}</text>
        </view>

        data() {
            return {
                weight:1110,
            }
        },
        computed:{
            jisuweight(){
                return this.weight>1000 ? (this.weight/1000)+"kg" : this.weight;
            }
        },

原文地址:https://www.cnblogs.com/IwishIcould/p/12184430.html

时间: 2024-10-12 14:29:22

uni-app 计算属性 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>

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"></

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

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

计算属性computed与methods

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

计算属性 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

vue.js的计算属性computed

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

vue2计算属性computed

详见vue2.0 API<计算属性> 需求: 模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这种情况下,模板不再简单和清晰.在意识到这是反向显示 message 之前,你不得不再次确认第二遍.当你想要在模板中多次反向显示 message 的时候,

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="">