Vue中监视文本框数据改变之watch方式

最新推荐文章于 2025-04-14 14:59:43 发布

学习没有捷径，如果有那便是持之以恒

最新推荐文章于 2025-04-14 14:59:43 发布

阅读量1.3k

点赞数 1

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/wulianlang6162/article/details/99601954

版权

vue 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一个使用Vue.js和Bootstrap构建的简单应用实例，展示了如何通过Vue.js进行数据绑定，并利用Bootstrap实现响应式设计。文章深入讲解了Vue的watch特性，当数据变化时如何触发其他数据更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
           <!--//导入js包-->
           <script src="js/vue.js"></script>
           <!-- Bootstrap -->
           <link href="./bootstrap/dist/css/bootstrap.css" rel="stylesheet">
           <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
           <link href="./css/Animate.css" rel="stylesheet">
           <!-- 引入路由 -->
           <script src="./js/vue-router.js"></script>
           <!-- 位router-link设置样式 -->
</head>
<body>
        <div id="app">
             <input type="text" v-model="name">
             <input type="text" v-model="age">
            </div>
            <script>
            

     new Vue({
      el:'#app',
      data:{
        name:'',
        age:'12'
      },
      methods: {
          
      },
      watch: {
          //监听data中的数据，name就是数据的名称
        name:function(){
                  this.age='sdsf'
        }
    }
    })
  

    </script>
</body>
</html>