表单绑定 v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
<!--        <input type="text" v-model="message">&lt;!&ndash;实现双向绑定&ndash;&gt;-->
<!--        <input type="text" :value="message" v-on:input="valuechange">-->
        <input type="text" :value="message" @input="message=$event.target.value">
        <h2>{{message}}</h2>
    </div>

<script src="vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:'hihi'
        },
        methods:{
            // valuechange(event){
            //     this.message=event.target.value;
            // }
        }
    })
</script>
</body>
</html>
v-model包含有两个指令，1v-bind绑定一个value属性，2v-on指令给当前元素绑定input事件
巴特西

表单绑定 v-model

最新文章

热门文章
