vue数据选项data、computed、methods使用方式

最新推荐文章于 2024-07-16 09:46:43 发布

hongChengliu

最新推荐文章于 2024-07-16 09:46:43 发布

阅读量1.2k

点赞数

分类专栏： vue 前端文章标签： data methods computed 使用方式

本文链接：https://blog.csdn.net/weixin_44853999/article/details/102595686

版权

vue 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

data

data是里面的数据是全局属性，可以在export default{ } 任何地方调用。
deta是方法所以写成data（）{ return{ } }。数据都写在return{} 里面数据呈键值对形式.
computed：computed和data不一样。他是在{} 里面写方法并且可以调用data里面的值。
methods：他是完成方法的一个数据

<template>
  <!-- deta computed  methods -->
  <div>
    <div class="box">{{sucess}}</div>
    <div>--------------------------------------------</div>
    <div>computed:{{message}}</div>
<div>--------------------------------------------</div>
  <div @click="show()">点击我</div>
    <!-- 必须要由一个div包住，最外层div相当于body -->
  </div>


</template>

<script>
  export default{
    data(){
      return{
        sucess: '好厉害',
        num:10
      }
      },
      computed:{
        // computed里面写函数
        message(){
          return 10+this.num
        }
      },
      methods : {
          show(){
            alert(123)
          }
      }

  }
</script>