<input :value="value" @input="updateValue" placeholder="edit me">

@input是input框中的值变化时触发的函数。
以下示例是:input内容变化时,下面的内容也跟着变化。

<div id="app">
	    <com v-model="message"></com>
	    <p>Message is: {{ message }}</p>
	</div>
	<script>
	    var app = new Vue({
	        el: '#app',
	        data: {
	            message: ''
	        },
	        components: {
	            com:  {
	                props: ['value'],
	                template: '<input :value="value" @input="updateValue" placeholder="edit me">',
	                methods: {
	                    updateValue: function (e) {
	                        this.$emit('input', e.target.value);
	                    }
	                }
	            }
	        },
	        methods: {
	        }
	    })  
    </script>

效果为:
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐