(尚004)Vue计算属性之基本使用和监视
2024-09-21 03:56:36
所做效果预览:
test004.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性和监视</title>
</head>
<body>
<!--
1.计算属性
在在computed属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算的结果 -->
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstname"><br>
名: <input type="text" placeholder="Last Name" v-model="lastname"><br>
姓名1(单向):<input type="text" placeholder="Full Name1" v-model="fullname1"><br>
姓名2(单向):<input type="text" placeholder="Full Name2" v-model="fullname2"><br>
姓名3(双向):<input type="text" placeholder="Full Name3"><br>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
const vm= new Vue({
el:'#demo',
data:{
firstname:'赵',
lastname:'云',
fullname2:'赵 云'
},
computed:{
//什么时候执行:初始化显示执行/相关的data的属性数据发生变化
fullname1(){//计算属性的一个方法,方法的返回值作为属性值
console.log('fullname1')
//this就是vm对象
return this.firstname+''+this.lastname
} },
watch:{//配置监视属性
//里面是个回调函数function
//如果不需要以前的值了,可以这样写function(newVal)
firstname: function(value){//firstname发生了 变化,我们需要去修改fullname1
console.log(this)
//this就是vm对象
this.fullname2=value+' '+this.lastname
}
}
}) //所有vm的方法都以$开头
vm.$watch('lastname',function(value){
//更新fullname2
this.fullname2=this.firstname+' '+value
})
</script>
</body>
</html>
==================================================================================================================
通过对比发现计算属性优于监视
最新文章
- 通过openswan基于Azure平台搭建VPN server
- Installshield如何实现升级覆盖文件
- 【C#进阶系列】17 委托
- 批量去除Teleport Pro整站下载文件冗余代码
- Cheatsheet: 2014 07.01 ~ 07.31
- SPOJ #10657. LOGIC (riddle)
- 浅谈IT
- group by java实现
- B*tree dump
- Java实现Http服务器(三)
- Redis监控
- YII model模型和登陆详解
- 【jquery学习笔记】关于$(window),$(";html,body";).scroll()的在不同浏览器的不同反应
- 立波 iphone3gs越狱教程:成功把iphone3gs手机升级成ios6.1.3系统,完美越狱,解决no service和耗电量大的问题
- 转:loadrunner ---循环输出关联数组
- java 生成不重复的随机数
- 我的项目经验总结——CDN镜像:1(初探)
- WPF基础篇之资源文件路径
- datatable中的copy和clone的用法区分
- 微信小程序---转发分享功能
热门文章
- gorm - postgresql 如何连接?
- 原子类 Atomic
- GOF 的23种JAVA常用设计模式总结 01 设计模式的概念分类和功能
- Linux sftp命令
- ubuntu classicmenu-indicator
- 易百教程人工智能python修正-人工智能数据准备-标记数据
- Java xml出现错误 javax.xml.transform.TransformerException: java.lang.NullPointerException
- [LeetCode] 62. 不同路径 ☆☆☆(动态规划)
- HDFS读流程
- web项目中添加定时任务