前端歌谣-第捌拾贰课-vue知识汇总

最新推荐文章于 2024-09-15 17:15:28 发布

前端歌谣

最新推荐文章于 2024-09-15 17:15:28 发布

阅读量342

点赞数 10

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_41632427/article/details/134249173

版权

歌谣-最强学习合集专栏收录该内容

114 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue.js中v-model指令的使用，展示了如何在HTML输入元素上实现双向数据绑定，以及如何通过methods中的方法改变数据并实时更新视图。

摘要由CSDN通过智能技术生成

前言

今天继续给大家带来vue知识的讲解

指令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>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
      <input v-model="geyao">
    </div> 
   
    <script>
        const app=new Vue({
            el:"#app",
            data:{
                geyao:"1111"
            },
            methods:{
                changeData(count){
                    console.log("geyao")
                    this.data=this.data+count
                }
            }
        })
    </script>
</body>
</html>