xinggevip

Vue2.x_1.4数据绑定
ref和v-model实现数据绑定app.jsnew Vue({ el:"#vue-app&qu...
扫描右侧二维码阅读全文
15
2019/05

Vue2.x_1.4数据绑定

ref和v-model实现数据绑定

app.js

new Vue({
    el:"#vue-app",

    data:{
        name:"",
        age:"",
        name01:"",
        age01:"",
    },

    methods:{
        logName: function () {
            // console.log("你正在输入你的名字");
            console.log(this.$refs.name.value);
            this.name = this.$refs.name.value;
        },

        logAge: function () {
            // console.log("你正在输入年龄");
            console.log(this.$refs.age.value);
            this.age= this.$refs.age.value;
        },
    },
})

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <!-- 生产环境版本,优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="vue-app">
        <h1>数据绑定</h1>
        <h5>ref属性实现数据绑定</h5>
        <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>
        <!--内置函数v-model实现同上数据绑定的功能-->
        <br>
        <h5>v-model函数实现数据绑定</h5>
        <label>姓名</label><input  type="text" v-model="name01"><span>{{name01}}</span>
        <label>年龄</label><input type="text" v-model="age01"><span>{{age01}}</span>

    </div>
    <script src="app.js"></script>
</body>
</html>

演示链接

http://hao.qiangssvip.com/vuestudy/Lesson04

Last modification:May 21st, 2019 at 09:21 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment