vue项目中data数据之间互相访问的实现
作者：麦兜_冰夕 时间：2024-05-28 15:51:43
如下代码：
<div id="vue_det">
<input type="number" v-model="text">
<div>{{textAdd}}</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
text: 1,
textAdd:parseInt(this.text) + 1
}
})
</script>
想实现如下图所示效果：div标签里面的值为input中的值+1计算得出。
上面代码中的textAdd = parseInt(this.text) + 1，这种写法肯定访问不到this.text的值。
如若想访问data中的值，且textAdd是有text计算得出，想要实现双向数据绑定，text值变化，textAdd的值动态改变，可以用conputed来实现。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue的data中数据互相访问</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<!-- <script src="vue.min.js"></script> -->
</head>
<body>
<div id="vue_det">
<input type="number" v-model="text">
<div>{{textAdd}}</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
text: 1,
// textAdd:this.text+1
},
computed: {
textAdd: function() {
return (parseInt(this.text) + 1);
}
}
})
</script>
</body>
</html>
来源：https://blog.csdn.net/lyn1772671980/article/details/82217904
标签：vue,data,互相访问
0
投稿猜你喜欢
Python Pygame实现落球游戏详解
2021-06-23 00:54:38
JavaScript高级程序设计 阅读笔记（十五） 浏览器中的JavaScript
2024-04-10 10:57:11
解决Python 中JSONDecodeError: Expecting value: line 1 column 1 (char 0)错误
2023-10-30 22:42:03
JavaScript的一些小技巧分享
2024-04-23 09:29:01
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2023-12-28 03:21:52
Python机器学习应用之支持向量机的分类预测篇
2023-08-29 20:42:55
解决MSSQL下“不能在手动或分布事务方式下创建新的连接”的问题
2008-07-15 12:48:00
利用global.asa计划执行程序
2008-03-05 12:49:00
解决Vue路由导航报错:NavigationDuplicated: Avoided redundant navigation to current location
2023-07-02 17:08:39
Python实现桌面翻译工具【新手必学】
2021-03-27 08:32:47
浅析node命令行交互原理
2024-05-11 10:14:36
为vue项目自动设置请求状态的配置方法
2024-04-30 10:44:26
pyqt远程批量执行Linux命令程序的方法
2023-05-08 15:59:06
存储过程优缺点分析
2012-04-13 11:39:56
如何在Python中进行异常处理
2021-02-21 06:51:01
asp下用OracleInProcServer完成对Oracle的连接和操作
2008-04-13 07:10:00
Python画图工具Matplotlib库常用命令简述
2021-10-11 07:28:07
Python中利用ItsDangerous快捷实现数据加密
2022-06-09 23:24:41
ASP UTF-8编码生成静态网页的函数
2011-03-07 11:24:00
js增强的自定义事件模型
2008-02-18 12:37:00