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

Vue的双向绑定例子

291
1
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组件例子

Comment

Message Board

有猫的茶水间 农民 已采用

1900年1月20日 02:06

v-on 是事件监听，不是双向绑定