computed计算属性的用法，模模糊糊；后，用methods也可，为什么

最新推荐文章于 2023-12-27 22:41:40 发布

hamimelon2020

最新推荐文章于 2023-12-27 22:41:40 发布

阅读量74

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_40945354/article/details/115395757

版权

vue 专栏收录该内容

722 篇文章 4 订阅

订阅专栏


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的方法_侠课岛(9xkd.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="computed-basics">
        <p>Has published books:</p>
        <span>{{ publishedBooksMessage }}</span>
      </div>
    <script>
Vue.createApp({
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    // 计算属性的 getter
    publishedBooksMessage() {
      // `this` 指向 vm 实例
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }
}).mount('#computed-basics')
    </script>

    <style>
        .demo {
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
}
    </style>
</body>
</html>

methods：


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的方法_侠课岛(9xkd.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="computed-basics">
        <p>Has published books:</p>
        <p>{{ calculateBooksMessage() }}</p>
      </div>
    <script>
Vue.createApp({
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
// 在组件中
methods: {
  calculateBooksMessage() {
    return this.author.books.length > 0 ? 'Yes' : 'No'


    }
  }
}).mount('#computed-basics')
    </script>

    <style>
        .demo {
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
}
    </style>
</body>
</html>