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

心已赠人 2021-07-25 02:12 426阅读 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 条评论，426人围观）

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

相关阅读

相关 Vue 计算属性 Computed

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

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

相关 vue计算属性computed

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

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

相关 Vue.js——计算属性(computed)(七)

计算属性什么是计算属性？我们知道，在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况，我们可能需要对数据进行一些转化后再显示，或

野性酷女/ 2022年11月19日 11:28/ 0 赞/ 238 阅读

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

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

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

相关 vue-计算属性computed

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

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

相关深入理解 Vue Computed 计算属性

Computed 计算属性是 Vue 中常用的一个功能，但你理解它是怎么工作的吗？拿官网简单的例子来看一下： <div id="example"> <

电玩女神/ 2022年05月27日 13:27/ 0 赞/ 251 阅读

相关 vue使用computed计算属性进行传参

需求，根据传递过来的宽高比，进行宽高的重新计算 computed:{ imgWD(o){ return function(o){

﹏ヽ暗。殇╰゛Y/ 2022年05月09日 09:36/ 0 赞/ 252 阅读

相关 Vue 框架-04-计算属性 computed

Vue 框架-04-计算属性计算属性是什么？大家可以去看官网解释：[计算属性和侦听器][Link 1] 今天的第一个小实例： ![在这里插入图片描述][201

ゞ浴缸里的玫瑰/ 2022年04月17日 06:05/ 0 赞/ 291 阅读

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

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

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

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

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

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