当前位置: 首页 > news >正文

第七篇:vue3 计算属性:computed

v-model ="firstName".   // v-model.  就是双向绑定的意思

<br/>  // 通过 v-model  进行绑定姓:<input type="text" v-model ="firstName"><br/>名:<input type="text" v-model="lastName"><br/>全称:<span>!!!!!</span><br/><script lang="ts" setup name = "Person">
import {ref} from 'vue'// 这里数据的双向绑定  , 通过 ref 实现数据响应
let firstName = ref("zhan")
let lastName = ref("san")
</script>

计算属性——只读取,不修改

// 计算属性——只读取,不修改/* let fullName = computed(()=>{return firstName.value + '-' + lastName.value}) */
// 计算属性——既读取又修改
let fullName = computed({// 读取get(){return firstName.value + '-' + lastName.value},// 修改set(val){   // 这里把值赋值给 对应的文本框console.log('有人修改了fullName',val)firstName.value = val.split('-')[0]lastName.value = val.split('-')[1]}})function changeName(){fullName.value = "li-si"console.log(fullName.value)}
<div class="person">姓:<input type="text" v-model="firstName"> <br>名:<input type="text" v-model="lastName"> <br>全名:<span>{{fullName}}</span> <br><button @click="changeFullName">全名改为:li-si</button></div>

http://www.lryc.cn/news/525193.html

相关文章:

  • 搭建k8s集群
  • Android SystemUI——最近任务应用列表(十七)
  • java 根据前端传回的png图片数组,后端加水印加密码生成pdf,返回给前端
  • 《探秘鸿蒙Next:如何保障AI模型轻量化后多设备协同功能一致》
  • C语言二级
  • 隐私保护+性能优化,RyTuneX 让你的电脑更快更安全
  • rust学习-宏的定义与使用
  • 【学习总结|DAY032】后端Web实战:登录认证
  • leetcode 123. 买卖股票的最佳时机 III
  • Apache Tika 详解
  • ChatGPT被曝存在爬虫漏洞,OpenAI未公开承认
  • Qt——界面优化
  • python学opencv|读取图像(四十一 )使用cv2.add()函数实现各个像素点BGR叠加
  • Spring MVC和Spring WebFlux的区别
  • Linux探秘坊-------4.进度条小程序
  • Llama 3:开源大模型的里程碑式突破
  • 计算机网络 (56)交互式音频/视频
  • STM32 GPIO工作模式
  • 自动化实现的思路变化
  • MongoDB的索引与聚合
  • Java菜鸟养成计划(java基础)--java运算符
  • 除了基本的事件绑定,鸿蒙的ArkUI
  • 0164__【GNU】gcc -O编译选项 -Og -O0 -O1 -O2 -O3 -Os
  • vue3组件传值具体使用
  • Web 音视频(二)在浏览器中解析视频
  • 江天科技主要产品销售单价下滑,应收账款、存货周转率大幅下降
  • 我国的金融组织体系,还有各大金融机构的分类,金融行业的组织
  • vue md5加密
  • 学习ASP.NET Core的身份认证(基于JwtBearer的身份认证7)
  • Ubuntu16.04 安装OpenCV4.5.4 避坑