computed Option 计算选项

简介: computed Option 计算选项

computed 的作用主要是对原数据进行改造输出。改造输出:包括格式的编辑,大小写转换,顺序重排,添加符号……。


一、格式化输出结果



我们先来做个读出价格的例子:我们读书的原始数据是price:100 但是我们输出给用户的样子是(¥100元)。 主要的javascript代码:

computed:{
    newPrice:function(){
        return this.price='¥' + this.price + '元';
    }
}


全部代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Computed Option 计算选项</title>
</head>
<body>
    <h1>Computed Option 计算选项</h1>
    <hr>
    <div id="app">
        {{newPrice}}
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                price:100
            },
            computed:{
                newPrice:function(){
                    return this.price='¥' + this.price + '元';
                }
            }
        })
    </script>
</body>
</html>


现在输出的结果就是:¥100元。


二、用计算属性反转数组



例如:我们得到了一个新闻列表的数组,它的顺序是按照新闻时间的顺序正序排列的,也就是早发生的新闻排在前面。这是反人类的,我们需要给他反转。这时我们就可以用到我们的计算属性了。


没有排序的新闻列表,是按照日期正序排列的。

var newsList=[
    {title:'香港或就“装甲车被扣”事件追责 起诉涉事运输公司',date:'2017/3/10'},
    {title:'日本第二大准航母服役 外媒:针对中国潜艇',date:'2017/3/12'},
    {title:'中国北方将有明显雨雪降温天气 南方阴雨持续',date:'2017/3/13'},
    {title:'起底“最短命副市长”:不到40天落马,全家被查',date:'2017/3/23'},
];


我们希望输出的结果:


  • 起底“最短命副市长”:不到40天落马,全家被查-2017/3/23
  • 中国北方将有明显雨雪降温天气 南方阴雨持续-2017/3/13
  • 日本第二大准航母服役 外媒:针对中国潜艇-2017/3/12
  • 香港或就“装甲车被扣”事件追责 起诉涉事运输公司-2017/3/10


我们的在computed里的javascript代码:我们用js原生方法给数组作了反转。

computed:{
    reverseNews:function(){
        return this.newsList.reverse();
    }
}


总结:computed 属性是非常有用,在输出数据前可以轻松的改变数据。

目录
相关文章
|
5天前
|
缓存
在 setup 函数中使用 computed 计算属性
【10月更文挑战第23天】在 Vue3 中,`computed` 计算属性为我们提供了一种方便且高效的方式来处理基于其他响应式数据的派生数据。在 `setup` 函数中使用 `computed` 计算属性,可以让我们更好地组织和管理组件的逻辑。
|
5月前
|
JSON 监控 Serverless
函数计算操作报错合集之执行提示Unrecognized option 'preset' ,该怎么办
在使用函数计算服务(如阿里云函数计算)时,用户可能会遇到多种错误场景。以下是一些常见的操作报错及其可能的原因和解决方法,包括但不限于:1. 函数部署失败、2. 函数执行超时、3. 资源不足错误、4. 权限与访问错误、5. 依赖问题、6. 网络配置错误、7. 触发器配置错误、8. 日志与监控问题。
103 0
|
12月前
|
JavaScript API
vue的select下拉框多选项-multiple属性
vue的select下拉框多选项-multiple属性
434 0
Ant Design:Radio.Group单选组合与Select下拉选项两种添加子组件选项的语法
Ant Design:Radio.Group单选组合与Select下拉选项两种添加子组件选项的语法
249 0
|
关系型数据库 MySQL
Mysql GROUP_CONCAT与CONCAT_WS配合使用单选、多选拼接
Mysql GROUP_CONCAT与CONCAT_WS配合使用单选、多选拼接
|
Arthas 安全 测试技术
Options 全局选项的查看和设置 | 学习笔记
快速学习 Options 全局选项的查看和设置
Options 全局选项的查看和设置 | 学习笔记
|
JavaScript 前端开发
vue中select的option默认选中项的问题解决方案
vue中select的option默认选中项的问题解决方案
|
JavaScript
jQuery设置下拉框select 默认选中option
$("#id option:first").prop("selected", 'selected');  将请选择加入到select中第一位 $("#id").
1585 0
|
JavaScript
【mpvue】radio-group 标签组设置默认选择checked: 'true',选择了单选按钮的非默认选项,再点击其他的选择,单选按钮又会变成默认的选项
1、问题举例描述: radio-group 标签组设置默认选择checked: ‘true’,选择了单选按钮的非默认选项(场外),再点击其他的选择(手续费率),单选按钮又会变成默认的选项(场内) 默认状态如下:
510 0
【mpvue】radio-group 标签组设置默认选择checked: 'true',选择了单选按钮的非默认选项,再点击其他的选择,单选按钮又会变成默认的选项
|
JavaScript
vue操作select获取option值
vue操作select获取option值
vue操作select获取option值