Login
芋圆社区 > 编程 > 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 是事件监听,不是双向绑定
编程导航

Vue中v-for的例子

Vue组件例子

Vue的双向绑定例子

Copyright © 2020 芋圆社区

Powered by 浙ICP备2020039309号-1

此页面不支持夜间模式!

已进入夜间模式!

已进入普通模式!

搜索框不允许为空

签到成功!经验+5!芋圆币+2!

签到失败!今日已签到!

需要登录社区账号才可以进入!

复制成功
寄,页面未加载完成或页面无锚点