Vue的双向绑定例子

芋圆社区 > 编程 > Vue > Vue的双向绑定例子

970

2021-06-20

2022-05-17

Hey、小怪兽

• ~~用v-on实现双向绑定~~
<body>
<div id="vue-app">
<label>姓名：</label>
<input ref="name" type="text" v-on:keyup="logName">
<span>{{ name }}</span>
<label>年龄：</label>
<input ref="age" type="text" v-on:keyup="logAge">
<span>{{ age }}</span>
</div>
</body>
<script>
new Vue({
el: "#vue-app",
data: {
name: "",
age: "",
},
methods: {
logName: function () {
this.name = this.$refs.name.value;
},
logAge: function () {
this.age = this.$refs.age.value;
}
}
})
</script>
• (修改：有猫的茶水间 2021-6-20）

• 用v-model实现双向绑定

<body>
    <div id="vue-app">
        <label>姓名：</label>
        <input type="text" v-model="name">
        <span>{{ name }}</span>
        <label>年龄：</label>
        <input type="text" v-model="age">
        <span>{{ age }}</span>
    </div>
</body>

<script>
    new Vue({
        el: "#vue-app",
        data: {
            name: "",
            age: "",
        },
    })
</script>

上一篇：Vue组件例子

Vue的双向绑定例子

回复