网络编程
位置：首页>> 网络编程>> JavaScript>> vue项目中data数据之间互相访问的实现

vue项目中data数据之间互相访问的实现

作者：麦兜_冰夕　　发布时间：2024-05-28 15:51:43　

标签：vue,data,互相访问

如下代码：

<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计算得出。

vue项目中data数据之间互相访问的实现

上面代码中的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

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com