vue 数据、方法、计算属性、侦听器的使用

小咪咪 2022-09-09 09:53 198阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>vue 数据、方法、计算属性、侦听器的使用</title>
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
      <div id="root"></div>
    </body>
    <script>
      // data & methods & computed & watcher
      // computed 和 method 都能实现的一个功能，建议使用 computed，因为有缓存
      // computed 和 watcher 都能实现的功能，建议使用 computed 因为更加简洁
      const app = Vue.createApp({
        data() {
          return {
            message: "hello world",
            count: 2,
            price: 5,
            newTotal: 10,
          }
        },
        watch: {
          // price 发生变化时，函数会执行
          price(current, prev) {
            this.newTotal = current * this.count;
          }
        },
        computed: {
          // 当计算属性依赖的内容发生变更时，才会重新执行计算
          total() {
            return Date.now() + this.count;
            // return this.count * this.price
          }
        },
        methods: {
          formatString(string) {
            return string.toUpperCase();
          },
          // 只要页面重新渲染，才会重新计算
          getTotal() {
            return Date.now();
            // return this.count * this.price;
          },
        },
        template: `
         <div> {
       {message}} {
       {newTotal}} </div>
        `
      });
      const vm = app.mount('#root');
    </script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，198人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 计算属性，方法，侦听器

计算属性，缓存机制 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly

亦凉/ 2023年07月08日 11:23/ 0 赞/ 7 阅读

相关 Vue计算属性和侦听器

计算属性：computed 在模板中放入太多的逻辑会让模板过重且难以维护。（computed的由来有一个重要原因，就是防止文本插值中逻辑过重，导致不易维护）例如：

不念不忘少年蓝@/ 2023年06月08日 04:45/ 0 赞/ 165 阅读

相关 Vue计算属性&侦听器&方法

字符串截取操作 js中字符串方法操作有很多:concat、indexOf…. 等等，本节主要介绍两种经常混淆的字符串截取方法:substring和substr

谁践踏了优雅/ 2023年06月07日 03:24/ 0 赞/ 5 阅读

相关 vue 数据、方法、计算属性、侦听器的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

小咪咪/ 2022年09月09日 09:53/ 0 赞/ 199 阅读

相关 vue中的计算属性、方法和侦听器

1、为什么使用计算属性模板内的表达式非常便利，但是设计他们的初衷是用于简单运算的。在模板中放入太多的逻辑，会使模板变得太重难以维护。所以对于任何复杂的逻辑，

骑猪看日落/ 2022年08月28日 05:40/ 0 赞/ 191 阅读

相关 Vue_计算属性，方法和侦听器

一.计算属性：我们在开发当中通常会遇到这种情况，需要返回的是两个变量的计算值，那我们就在computed属性中去定义计算的方法： eg：我们现在有两个变量：f

- 日理万妓/ 2022年05月22日 13:22/ 0 赞/ 255 阅读

相关 vue：计算属性、方法和侦听器对比

1、模板内的表达式非常便利，用于简单的运算，但是，放入过多的逻辑运算就显的笨重，难以维护。解决： 1.1模板中使用计算属性。 <template>

我就是我/ 2022年05月15日 13:40/ 0 赞/ 232 阅读

相关 vue07-计算属性/方法/侦听器

有一个场景，我们定义两个变量firstName,lastName,要自动计算出fullName。 1.我们可以用method方法计算，如下面代码，这样有一个缺点，每次调用都要

短命女/ 2022年05月10日 00:06/ 0 赞/ 240 阅读

相关 Vue计算属性和侦听器

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

柔情只为你懂/ 2021年09月20日 02:34/ 0 赞/ 420 阅读

相关 Vue - 计算属性，侦听器的使用

在Vue中，模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。下面来简单讲解一下c

短命女/ 2021年07月25日 16:15/ 0 赞/ 485 阅读