vue快速入门(二十二)修改计算属性

注释很详细,直接上代码

上一篇

新增内容

  1. 当需要修改计算属性时应该采用的完整写法
  2. 设置双向绑定的懒加载
    源码
html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 挂载点 -->
  <div id="root">
   <div>名字:<input type="text" v-model="firstName"></div>
   <div>姓氏:<input type="text" v-model="lastName"></div>
   <!-- 输入框绑定计算属性fullName,.lazy修饰符,输入框失去焦点时才更新 -->
   <div>姓名:<input type="text" v-model.lazy="fullName"></div>
  </div>
    <!-- 导入vue的js代码:不会下载的看专栏第一篇 -->
    <script src="./lib/vue2.js"></script>

    <script>
      const app = new Vue({// Vue实例
        el: '#root',// 挂载点
        data: {// 数据
          firstName:'压力山大',
          lastName:'眨眼睛'
        },
        methods: {// 方法
          
        },
        computed:{// 计算属性
          // 正常情况下,计算属性的值是只读的,不能修改
          // 如果需要修改,需要使用set方法,也就是这里的完整写法
          fullName:{
            get(){// get方法,返回计算属性的值
              return this.firstName +'·'+ this.lastName
            },
            set(value){// set方法,修改计算属性的值,value为新的值
              const names = value.split('·')
              this.firstName = names[0]
              this.lastName = names[1]
            }
          }
        }
      })
    </script>
</body>

</html>

效果演示

相关推荐
LBJ辉2 分钟前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea7 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
试图让你心动9 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_9 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏9 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数10 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam10 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴85010 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的12 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀12 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架