结合双向绑定案例-watch实现

最新推荐文章于 2023-12-18 19:48:34 发布

Eli-sun

最新推荐文章于 2023-12-18 19:48:34 发布

阅读量219

点赞数

分类专栏： Vuejs 文章标签： vue

本文链接：https://blog.csdn.net/vfjcgg/article/details/106842019

版权

Vuejs 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

结合双向绑定案例-watch实现

watch这个方法老师还没讲

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<div id="app">
  <cpn :number1="num1"
       :number2="num2"
       @num1change="num1change"
       @num2change="num2change"
  ></cpn>

</div>

<template id="cpn">
  <div>
    <h2>props:{{number1}}</h2>
    <h2>data:{{dnumber1}}</h2>
    <!--<input type="text" v-model="dnumber1">-->
    <input type="text" v-model="dnumber1">
    <h2>props:{{number2}}</h2>
    <h2>data:{{dnumber2}}</h2>
    <!--<input type="text" v-model="dnumber2">-->
    <input type="text" v-model="dnumber2">

  </div>
</template>
<script src="../../vue.min.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
      message:'hello',
      num1:1,
      num2:0,
    },
    methods:{
      num1change(){
        this.num1=parseFloat(value)
      },
      num2change(){
        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('num1change',newValue);
          },
          dnumber2(newValue){
            this.dnumber1=newValue/100;
            this.$emit('num2change',newValue);
          }

        }
      }
    },

  })
</script>
</body>
</html>