013.Vue3入门,计算属性的使用,让模板语法更简洁
1、代码如下:
<template> <h3>计算属性</h3> <div>{{ func1 }}</div> <div>{{ func1 }}</div> <div>{{ func1 }}</div> <!-- <div>{{ func1() }}</div>--> <!-- <div>{{ func1() }}</div>--> <!-- <div>{{ func1() }}</div>--> </template> <script> export default { data() { return { people1: { name: "张三", profession: ["医生", "小护士", "工程师", "骑手"] } } }, // 将复杂的计算,可以放到计算属性中操作,让代码更简洁,避免重复执行 computed: { func1() { console.log(this.people1.profession.length); return this.people1.profession.length > 2 ? "Yes" : "No" }, }, // methods: { // func1() { // console.log(this.people1.profession.length); // return this.people1.profession.length > 0 ? "Yes" : "No" // } // } } </script>
2、如果在模板中直接执行函数,会多次调用。模板界面复杂难懂。
3、如果写在计算模板中,那么代码简洁,如下图所示。