vue-cli watch简单用法

最新推荐文章于 2024-02-06 14:06:07 发布

转载最新推荐文章于 2024-02-06 14:06:07 发布 · 537 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/MainActivity/p/8953703.html

文章标签：

#javascript #ViewUI

本文介绍了一个简单的Vue单文件组件实例，通过点击事件来改变数据，并使用watch监听数据变化。该实例展示了如何定义模板、数据、方法及样式。

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

创建一个vue单文件

<template>
  <div id="test">
    <h4 @click="changeMsg()" id="outputDom">{{msg}}</h4>
  </div>
</template>

<script>
    export default {
        name: "test",
        data:function(){
          return{
            msg:'test msg'
          }
        },
        watch:{
          msg:function(){
            console.log('msg进行了改变');
          }
        },
        mounted:function(){
        },
        methods:{
          changeMsg:function(){
            this.msg = "改变MSG"
          }
        }
    }
</script>

<style lang="less">
</style>

这个时候我点击h4标签的时候便会触发watch中的msg方法

转载于:https://www.cnblogs.com/MainActivity/p/8953703.html