Vue的v-model学习记录

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Crazy_liyang/article/details/79999231
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>render</title>
    <!-- 开发环境版本,包含了用帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
     <!--  <input :value="name"  @input="doChange ( $event.target.value )" >
         <span> {{ name }} </span> -->

    <!--  v-model的语法糖:  v-bind:value="something"     v-on:input="something = $event.target.value"  -->

   <!-- <ele  v-model ='msg' ></ele>-->

   <ele  :value='msg'  @input="Change" ></ele>
    <hr>
    <span> {{ msg }} </span>
</div>

<script>
    Vue.component('ele',{
        props: ['value'],
        template:`<input  @input="change( $event.target.value )" ></input>`,
        data(){
          return{
              chlidmsg: this.value,
          }
        },
        methods:{
            change( val ){
                console.log( this.value );
                this.$emit( 'input', val );
            },
            get(){
                return this.value;
            }
        }
    });

    new Vue({
        el: '#app',
        data() {
            return{
                name: 'ha',
                msg: '首次11数据传递'
            }
        },
        methods: {
            doChange ( val ) {
                this.name = val;
            },
            Change (val ){
                this.msg = val;
            }
        },
    });
</script>
</body>
</html>

展开阅读全文

没有更多推荐了,返回首页