区块链技术博客
www.b2bchain.cn

vscode——VUE父子通信的双向绑定实例(watch实现)(二)的讲解

这篇文章主要介绍了vscode——VUE父子通信的双向绑定实例(watch实现)(二)的讲解,通过具体代码讲解7759并且分析了vscode——VUE父子通信的双向绑定实例(watch实现)(二)的讲解的详细步骤与相关技巧,需要的朋友可以参考下

本文实例讲述了vscode——VUE父子通信的双向绑定实例(watch实现)(二)的讲解。分享给大家供大家参考文章查询地址https://www.b2bchain.cn/7759.html。具体如下:

具体的实现结果和功能都在

vscode——VUE父子通信的双向绑定实例(复杂但易懂)(一)

更改的部分为:

vscode——VUE父子通信的双向绑定实例(watch实现)(二)

vscode——VUE父子通信的双向绑定实例(watch实现)(二) 

代码如下:

 <!DOCTYPE html> <html>  <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>父子通信的双向绑定</title>   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head>  <body>   <div id="app">     <cpn :number1 = "num1"  :number2 = "num2"                 @number1-change ="num1Change" @number2-change ="num2Change"></cpn>   </div>    <template id="cpn">     <div>       <h2>子传父:{{number1}}</h2>       <h2>父传子:{{dnumber1}}</h2>       <input type="text" v-model ="dnumber1" >       <h2>子传父:{{number2}}</h2>       <h2>父传子:{{dnumber2}}</h2>       <input type="text" v-model ="dnumber2"  >     </div>   </template>    <script>     var app= new Vue({       el: '#app',       data: {         num1:0,         num2:1       },       methods: {         num1Change(value){           this.num1 = parseFloat(value)//string转化number         },         num2Change(value){           this.num2 = parseFloat(value)         }       },       components:{         cpn:{           template:'#cpn',           props:{             number1:Number,             number2:Number           },           data() {             return {               dnumber1 : this.number1,               dnumber2 : this.number2             }           },           watch: {             dnumber1(newValue){               this.dnumber2 = newValue * 100               this.$emit('number1-change',newValue)             },             dnumber2(newValue){               this.dnumber1 = newValue / 100               this.$emit('number2-change',newValue)             }           },         },       }     });   </script> </body>  </html>

 

本文地址https://www.b2bchain.cn/7759.html

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » vscode——VUE父子通信的双向绑定实例(watch实现)(二)的讲解
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们