vue计算属性computed(简单使用)

心已赠人 2021-07-25 02:12 584阅读 0赞

## vue计算属性computed(简单使用) ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>计算属性computed</title>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
      <div id="app">
        <h2>{ {  message }}</h2>
        <br />
        <input v-model="message">
        <br />
        <input v-model="a">
        <br />
        <input v-model="obj.age">
        <br />
        <input v-model="sum">
      </div>
    </body>
    <script>
      var app = new Vue({ 
        el: '#app',
        data: { 
          message: 'Hello Vue!',
          a:1,
          obj:{ 
            name:'gr',
            age:18
          }
        },
        // 计算属性
        computed: { 
          sum:function(){ 
            return +this.a+(+this.obj.age)
          }
        },
      })
    </script>
    
    </html>

**效果图：**  
![计算属性效果图][20200704085556462.png]

**说明**：计算属性可以当data使用，不必在data声明，默认会调用一次，随着里面的值发生改变，会自动计算，调用一次函数

[20200704085556462.png]: /images/20210724/9b0d0b7624854ac0ba6be43040e5dc99.png

发表评论取消回复

表情：

评论列表（有 0 条评论，584人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue计算属性：computed示例

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K

小灰灰/ 2023年10月01日 10:14/ 0 赞/ 43 阅读

相关 Vue-计算属性(computed)简单说明和使用

前言学习vue的计算属性之前，我们先写一个案例，我们先用插值语法实现，然后再使用vue的计算属性实现，经过对比，我们就能掌握计算属性的精髓和原理插值语法编写案例

刺骨的言语ヽ痛彻心扉/ 2023年09月25日 19:16/ 0 赞/ 114 阅读

相关【VUE】VUE计算属性(computed)

什么是计算属性(computed) 当你有一些数据需要随着其它数据变动而变动时,这个时候可以使用计算属性来绑定你的数据。当然，watch和计算属性效果是完全一致的。

矫情吗；*/ 2023年07月17日 07:41/ 0 赞/ 38 阅读

相关 vue-计算属性computed

为什么要用computed，需要计算为什么不直接用function（）计算然后调用？没有学习vue的时候，在网页上写一个小模块：该网站已运行时长xx年xx天xx小时xx分钟

灰太狼/ 2023年06月03日 11:52/ 0 赞/ 75 阅读

相关 Vue 计算属性 Computed

基础布局 <div id="example"> <p>Original message: "{ { message }}"</p> <p>Co

喜欢ヅ旅行/ 2022年12月05日 10:19/ 0 赞/ 365 阅读

相关 vue计算属性computed

computed属性计算 new Vue({ el:"", data:{ }, methods:{ }, watch:{

谁借莪１个温暖的怀抱￠/ 2022年11月29日 12:15/ 0 赞/ 366 阅读

相关 Vue的Computed计算属性的使用

Vue的Computed计算属性的使用 computed和methods类似 `computed只能调用一次，methods可以调用多次，computed如果没有改变就

阳光穿透心脏的1/2处/ 2022年11月07日 13:29/ 0 赞/ 434 阅读

相关 vue-计算属性computed

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

深藏阁楼爱情的钟/ 2022年07月12日 14:55/ 0 赞/ 385 阅读

相关 vue---computed计算属性的使用

一直以来在使用vue的时候，会对vue的computed属性和watch属性具体的使用分不清楚，总算花点时间整理了下。 computed:通常用于监控自己定义的变量，这个变量

落日映苍穹つ/ 2021年12月16日 07:03/ 0 赞/ 494 阅读

相关 vue计算属性computed(简单使用)

vue计算属性computed(简单使用) <!DOCTYPE html> <html lang="en"> <head>

心已赠人/ 2021年07月25日 02:12/ 0 赞/ 585 阅读