Vue学习(3)双向数据绑定

最新推荐文章于 2024-04-22 09:07:57 发布

ssqsssq

最新推荐文章于 2024-04-22 09:07:57 发布

阅读量189

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43778744/article/details/105209859

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Data --> View --> Data2 --> View2

<!--
 * @Author: your name
 * @Date: 2020-03-30 21:33:46
 * @LastEditTime: 2020-03-30 21:54:16
 * @LastEditors: Please set LastEditors
 * @Description: Vue的双向数据绑定
 * @FilePath: \x\03.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
    
    <div id="app">
        <!-- <input type="text" v-model="msg"> -->
        <input type="text" v-bind:value="msg" v-on:input='valueChange'>
        <h3>{{msg}}</h3>
    </div>
    <script type="text/javascript">
        // v-model 双向数据绑定的体现 只会体现在UI控件中，只能在有value属性的
        // 语法糖 v-bind + input
        new Vue({
            el: "#app",
            data() {
                return {
                    msg: "da"
                }
            },
            methods: {
                valueChange(e) {
                    console.log(e)
                    this.msg=e.target.value;
                }
            },
        });
    </script>
</body>
</html>