Vue计算属性

最新推荐文章于 2024-03-29 14:37:17 发布

weixin_56751539

最新推荐文章于 2024-03-29 14:37:17 发布

阅读量58

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_56751539/article/details/119824852

版权

本文介绍了Vue.js中计算属性与方法的使用，包括如何将字符串反转、计算属性的功能及其优势。计算属性提供了缓存机制，提高了效率，而方法每次调用都会执行。同时，文章通过示例代码展示了计算属性的实现，强调了在模板中应避免复杂的计算，提倡使用计算属性简化数据操作。

摘要由CSDN通过智能技术生成

<body>
       <div id="app">
           计算:<input type="text" v-model="msg" />
           
           <br /> {{msg.split('').reverse().join('')}｝
      <br />{{reverseStr}}

</div>
       <script src="../js/vue.js"></script>
       <script>
       const app = new Vue({
           el:"#app",
           data: {
               msg: ''
           },
           //定义计算属性
           computed:{//必须要有返回值
               reverseStr(){//看似方法，但是是属性
                   return this.msg.split('').reverse().join('')
               }
           }
       })
       </script>
   </body>