Vue.js 计算属性

最新推荐文章于 2021-12-17 00:10:40 发布
最新推荐文章于 2021-12-17 00:10:40 发布
阅读量180 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40861561/article/details/105217359
版权

计算属性关键词: computed、methods

计算属性用于处理一些复杂逻辑

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="vue.min.js"></script>
  <title></title>
  <style>
table tr td{
    border:1px solid gray;
    padding:10px;

}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;
}
tr.list{
    background-color: lightGray;
}
</style>
</head>
<body>
<div id="div1">   
    <table align="center" >
        <tr class="list">
            <th>美元</th>
            <td>黄金</td>
        </tr>      
        <tr>
                <td align="center" colspan="2">
           汇率:<input type="number" v-model.number="change"/>  
            </td>
        </tr> 
        <tr>
           <td align="center">
              $:<input type="number" v-model.number = "dollar"/>
            </td>
            <td align="center">
                           盎司: {{dollar/change}}
            </td>
        </tr>
    </table>
</div>  
</body>
  <script>  
  new Vue({
    el:'#div1',
    data:{
      change:1200,
      dollar:0
    }
  })
</script>
</html>

computed vs methods
使用methods来替代 computed，效果上两个都是一样的，但是computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值
而使用 methods ，在重新渲染的时候，函数总会重新调用执行

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8"> 
<script type="text/javascript" src="vue.min.js"> </script> <title></title>
 <style>
 table tr td{ 
border:1px solid gray;
 padding:10px;
 }
 table{
 border-collapse:collapse; width:800px; table-layout:fixed;
 } 
tr.list{ 
background-color: lightGray; 
}
 </style> 
</head>
 <body>
 <div id="div1">
 <table align="center" > 
<tr class="list">
 <td>美元</td> 
<td>黄金</td> 
</tr>
 <tr> 
<td align="center" colspan="2"> 
汇率： <input type="number" v-model.number="change" /> 
</td> 
</tr> 
<tr> 
<td align="center"> 
$: <input type="number" v-model.number = "dollar" />
 </td> 
<td align="center">
 盎司: {{ ounce }} 
</td>
 </tr>
 </table> 
</div>
 </body>
 <script> 
new Vue({
 el: '#div1',
 data: { 
change:1200, 
dollar:0 
}, 
computed:{
 计算属性的 get方法
 ounce:function() {
 return this.dollar / this.change; 
}
 }
 }) 
</script> 
</html>


computed 属性默认只有 get方法，需要时可以提供一个 set方法:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="vue.min.js"></script>
        <title></title>
    </head>
    <body>
<div id="app">
  <p>{{ site }}</p>
</div>

<script>
var news = new Vue({
  el: '#app',
  data: {
    name: 'Hundred poison',
    url: 'https://www.baidu.com'
  },
  computed: {
    site: {
      // get方法
      get: function () {
        return this.name + ' ' + this.url
      },
      // set方法
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 调用 set方法， demo.name 和 demo.url 相对应更新
news.site = '极客教程 http://www.geekes.cn';
document.write('name: ' + news.name);
document.write('<br>');
document.write('url: ' + news.url);
</script>
</body>
</html>
 
computed 性能会更好，不缓存，可以使用 methods 属性

<!DOCTYPE html>
 <html> 
<head> 
<meta charset="UTF-8">
 <script type="text/javascript" src="vue.min.js"> </script> <title></title> 
<style>
 table tr td{
 border:1px solid gray;
 padding:10px;
 }
 table{
 border-collapse:collapse; 
width:800px; 
table-layout:fixed; 
} 
tr.list{
 background-color: lightGray; 
}
 </style> 
</head>
 <body> 
<div id="div1"> 
<table align="center" >
 <tr class="list"> 
<td>美元</td> 
<td>黄金</td> 
</tr> 
<tr> 
<td align="center" colspan="2">
 汇率： <input type="number" v-model.number="change" />
 </td> 
</tr> 
<tr> 
<td align="center">
 $: <input type="number" v-model.number = "dollar" />
 </td> 
<td align="center">
 <!-- 注意,getounce()是方法,要带()-->
盎司: {{ getounce() }} 
</td> 
</tr>
 </table> 
</div> 
</body>
<script> 
new Vue({ 
el: '#div1', 
data: { 
change:1200,
 dollar:0
 },
 methods:{ 
getounce:function() { 
return this.dollar / this.change;
 }
 }
 }) 
</script>
 </html>

 
秋城落叶
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue根据数字显示对应的文字状态
qq_41566366的博客
07-16 1万+
使用map定义 // 定义字典 const map = {boolean: ['否', '是']} // 或者 const map = {boolean: {0: '否', 1: '是', 2: '不知道'}} // 调用 <div>{{map.boolean[item.enable]}}</div> 或者使用计算熟属性 <div id="app"><h1>{{ isture }}</h1></div> <.
vue基础表格+计算属性实现搜索功能+「代码实例」
u014265398的博客
10-25 501
一.基础表格代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基础表格示例</title> <style> *{ padding: 0px; margin: 0px; } .box { height: auto; width: 90%; margin: 1% 20%; }
js将number数值转化成为货币格式，货币格式化，金钱过滤器，货币过滤器，vue货币过滤金钱过滤全局和局部两种实现方式
你的微笑像拥抱
02-01 9288
js中使用 js代码 const digitsRE = /(\d{3})(?=\d)/g function currency (value, currency, decimals) { value = parseFloat(value) if (!isFinite(value) || (!value && value !== 0)) return '' currency = cu
Vue中computed、methods和watch之间的区别
weixin_34178244的博客
04-09 594
对于那些开始学习Vue的人来说，对于方法、计算属性和观察者之间的区别有点混淆。 尽管通常可以使用它们中的每一个来完成或多或少相同的事情，但了解每个人在哪里胜过其他人还是很重要的。 在这个快速提示中，我们将了解Vue应用程序的这三个重要方面及其用例。我们将通过使用这三种方法中的每一种构建相同的搜索组件来实现这一点。 Methods 在一个方法中，或多或少是您所期望的——一个对象属性的函数。您可以使用...
VUE计算属性关键词: computed
张晨光老师的播客
01-04 615
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;计算列属性&lt;/title&gt; &lt;script src="js/vue.min.js"&gt;&lt;/script&gt; &am
学习vue.js计算属性
10-20
Vue.js 是一款流行的前端JavaScript框架，它提供了许多强大的特性，其中计算属性是其核心功能之一。计算属性在Vue实例中允许我们定义基于其他数据动态计算的值，它们提供了简洁、高效的代码来处理复杂的逻辑。 计算...
Vue.js计算机属性computed和methods方法详解
10-16
Vue.js 是一款流行的前端JavaScript框架，用于构建用户界面。在Vue的应用中，`computed` 和 `methods` 都是处理数据的重要方式，但它们在功能和使用场景上有所区别。 **计算机属性（Computed）** 计算机属性是Vue中...
深入浅析Vue.js计算属性和侦听器
10-18
在Vue.js中，计算属性和侦听器是两个重要的概念，它们帮助我们处理数据的复杂逻辑和响应性。让我们深入探讨这两个特性。 **一、计算属性** 计算属性是Vue.js中用于处理和组合现有数据的便捷方式。它们提供了一个在...
vue.js计算属性computed用法实例分析
10-18
在Vue.js中，计算属性（computed properties）是核心概念之一，它让开发者可以声明式地依赖于其它属性来计算结果，并且当依赖的属性发生变化时，计算属性会自动更新。本文将详细介绍计算属性computed的用法，并结合...
vue computed 计算属性 给计算属性变量赋值时 完整语法 get set（学习）
259的博客
12-17 1210
vue computed 计算属性 给计算属性变量赋值时 完整语法 get set
vue项目实战：实战技巧总结
weixin_43779957的博客
04-30 1231
一、创建项目及配置 1.1 vue cli2 创建项目 vue init webpack project npm install npm run dev 1.2 vue cli3 创建项目 vue create project 选择配置，看个人项目需求 TypeScript 支持使用 TypeScript 书写源码 Progressive Web App (PWA) Support P...
Vuex/Vue 练手项目 在线汇率转换器
weixin_30879169的博客
02-02 517
详情请点击: https://zhuanlan.zhihu.com/p/33362758 转载于:https://www.cnblogs.com/makejeffer/p/8403387.html
看程序学Vue.js 7- VUE.JS 计算属性 COMPUTED的用法举例
tujiahao1的博客
06-28 94
步骤 1 : 先看不用 computed <script src="http://how2j.cn/study/vue.min.js"></script> <style> table tr td{ border:1px solid gray; padding:10px; } table{ border-colla...
Vue实战篇二十：自定义表格合计
我的博客
12-09 1758
系列文章目录 Vue基础篇一：编写第一个Vue程序 Vue基础篇二：Vue组件的核心概念 Vue基础篇三：Vue的计算属性与侦听器 Vue基础篇四：Vue的生命周期（秒杀案例实战） Vue基础篇五：Vue的指令 Vue基础篇六：Vue使用JSX进行动态渲染 Vue提高篇一：使用Vuex进行状态管理 Vue提高篇二：使用vue-router实现静态路由 Vue提高篇三：使用vue-router实现动态路由 Vue提高篇四：使用Element UI组件库 Vue提高篇五：使用Jest进行单元测试 Vue提高篇六
用vue实现简单实时汇率计算功能
weixin_33812433的博客
01-15 1090
　　最近在自己摸索vue的使用，因为相对于只是去看教程和实例，感觉不如自己动手写一个demo入门来的快。刚好看到小程序中有一个简单但是很精致的应用极简汇率，而且它的表现形式和vue的表现形式很像，于是想着自己搞一个简单的应用来试试。 第一步是搭好简单的Html结构 <div id="demo"> <h1>汇率转换</h1> ...
如何在el-table中如何使用计算属性computed
luoteen的博客
03-10 8641
应用场景：在elementUI中，使用table表格显示数据时，如果碰上要用switch结构转化数据时，应该怎么办？ 一开始，我想在computed里写switch结构return出我想要的值，结果发现数据展示不出来。 然后之后想到，可以在methods中用方法的形式 return出我们想要的数据 之后改成这样了 然后就好了。。。 ...
Vue实现价格实时计算
CrazBarry的博客
03-18 4527
Vue实现价格实时计算需求分析使用属性后台返回数据格式思路参考 需求分析 商品有附加选购，需对多个附加选项价格进行实时勾选计算 使用属性 vue的computed 属性，computed 相较watch属性性能更优，watch属性多用于监听路由，况且computed 属性有名字给你叫‘计算’属性，当然是用来计算的。 后台返回数据格式 多选列表数据 checkBoxList:[ { produc...
vue+element的表格分页和搜索功能（使用计算属性进行搜索）
枫
05-22 6342
之前做一块的时候，从网上找到东西能满足需求，却不能更好的符合操作规范，所以在vue+element的表格分页和搜索功能基础上进行了更改。 话不多说，直接看代码： <template> <div> <div class="searchBox"> <el-input prefix-icon="iconfont icon-sousuo" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值