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>

效果演示

相关推荐
天天鸭30 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
江城开朗的豌豆1 小时前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
飞翔的佩奇1 小时前
Java项目:基于SSM框架实现的忘忧小区物业管理系统【ssm+B/S架构+源码+数据库+毕业论文+开题报告】
java·数据库·mysql·vue·毕业设计·ssm框架·小区物业管理系统
江城开朗的豌豆1 小时前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了1 小时前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆1 小时前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
前端 贾公子1 小时前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript