10-Vue之本地应用v-model指令

最新推荐文章于 2023-08-08 11:16:37 发布

爱学习de测试小白

最新推荐文章于 2023-08-08 11:16:37 发布

阅读量102

点赞数

分类专栏： # Vue 文章标签： vue

-- 来着爱学习de测试小白

本文链接：https://blog.csdn.net/IT_heima/article/details/113730362

版权

Vue 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

1. v-model指令

作用：便捷的设置和获取表单元素的值，绑定的数据会和表单元素值相关联，绑定的数据<-->表单元素的值

完整代码

<!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>
    <div id='app'>
        <input type="text" v-model='message' @keyup.enter='getMes'>
        <input type="button" value='修改mes' @click='setMes'>
        <h2>{{message}}</h2>
    </div>
    
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'我是测试小白!'
            }, 
            methods:{
                getMes:function(){
                    alert(this.message)
                },
                setMes:function(){
                    this.message='我是大海！'
                }

            }
        })
    </script>
</body>
</html>

爱学习de测试小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
10-Vue之本地应用v-model指令

1. v-model指令作用：便捷的设置和获取表单元素的值，绑定的数据会和表单元素值相关联，绑定的数据<-->表单元素的值完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
复制链接

扫一扫