vue的第八个功能：计算属性computed，他出版了几本书

<!DOCTYPE html><div id="computed-basics"><p>His published books:</p><span>{{ author.books.length > 2 ? 'Yes' :'No' }}</span></div></html><script s

hamimelon2020

61人浏览 · 2021-07-25 21:04:40

hamimelon2020 · 2021-07-25 21:04:40 发布

<!DOCTYPE html>
<div id="computed-basics">
  <p>His published books:</p>
  <span>{{ author.books.length > 2 ? 'Yes' :'No' }}</span>
</div>
</html>

<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
    data() {
        return {
            author: {
                name: 'John Doe',
                books: [
                    'Vue 2 - Advance 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>

2可以改成0或3、4

<!DOCTYPE html>
<div id="computed-basics">
  <p>His published books:</p>
  <span>{{ author.books.length > 0 ? 'Yes' :'No' }}</span>
</div>
</html>

<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
    data() {
        return {
            author: {
                name: 'John Doe',
                books: [
                    'Vue 2 - Advance 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>

他出版了几本书

<!DOCTYPE html>
<div id="computed-basics">
  <p>His published books:</p>
  <span>{{ author.books.length }}</span>
</div>
</html>

<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
    data() {
        return {
            author: {
                name: 'John Doe',
                books: [
                    'Vue 2 - Advance 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>

第四个

<!DOCTYPE html>
<div id="computed-basics">
  <p>His published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</div>
</html>

<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
    data() {
        return {
            author: {
                name: 'John Doe',
                books: [
                    'Vue 2 - Advance 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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^