vue3-组合式api-定义响应式数据-ref

<template>

  <div>

    <!-- 模板会自动解析value值 -->

    {{ counter }}

    <button @click="changeCounter">改变counter</button>

  </div>

</template>

<script>

import { ref } from "vue";

export default {

  setup() {

    //通过ref定义响应式变量

    //ref()返回带有value属性的对象

    let counter = ref(0);

 

    function changeCounter() {

      counter.value = 1;

    }

    return {

      counter,

      changeCounter,

    };

  },

};

</script>

 

运行效果：点击改变counter按钮，counter值由0变为1

出　　处：https://www.cnblogs.com/xiao-wo-niu/
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。