Vue-键盘事件、双向数据绑定

最新推荐文章于 2021-01-13 12:57:59 发布

Miracleeeeeeee

最新推荐文章于 2021-01-13 12:57:59 发布

阅读量146

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_42991834/article/details/90207345

版权

Vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!--vue-app是根容器-->
    <div id="vue-app">
        <h1>双向数据绑定/ input / select / textarea /</h1>
        <label>姓名:</label>
        <input ref="name" type="text" v-model="name">
        <span>{{name}}</span>
        <label>年龄:</label>
        <!--按回车键后才触发此方法-->
        <input ref="age" type="text" v-on:keyup.enter="logAge">
        <span>{{age}}</span>
    </div>
    <script src="app.js"></script>
</body>
</html>

app.js

new Vue({
    el:"#vue-app",
    data:{
        name:"",
        age:""
    },
    methods:{
        logName:function () {
            //console.log("你正在输入名字")
            //this.name=this.$refs.name.value;
        },
        logAge:function () {
            //console.log("你正在输入年龄")
            this.age=this.$refs.age.value;
        },
    }
});

Miracleeeeeeee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-键盘事件、双向数据绑定

index.html<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>Title</title> <script src=...
复制链接

扫一扫

专栏目录