Vue.js基础-05-Vue的常用选项-01-计算选项（computed）、方法选项（methods）、过滤器（filters）

已于 2022-11-19 00:03:10 修改
阅读量432 收藏 3
点赞数 1
分类专栏： # vue框架学习 文章标签： vue.js javascript 前端 computer methods
于 2022-05-17 22:17:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingzuo_1840/article/details/124768615
版权

文章目录

1. computed（计算选项）

语法示例

  • 引用
<p>计算回文: {{ reversedMessage }}</p>
  • 定义
computed: {
  // 计算属性的 getter
  reversedMessage: function () {
    // `this` 指向 vm 实例
    return this.message.split('').reverse().join('')
  }
}

完整示例

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW SONG</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <p>原文字串: {{ message }}</p>
    <p>计算回文: {{ reversedMessage }}</p>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: '鸦啼正落花'
      },
      computed: {
        reversedMessage: function () {
          return this.message.split('').reverse().join('')
        }
      }
    })
  </script>
</body>

</html>
  • 输出
原文: 鸦啼正落花

回文: 花落正啼鸦

完整示例（修改data中的值）

data 中定义message 值为 “花落正啼鸦”.
conputer中包含get和set两个get特然。get 返回message值；set接收新值，重写设置data中数据。
结果打印 1）get的返回值 2）data中message值

  • 代码
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <p>{{ reversedMessage }}</p>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: '花落正啼鸦',
      },
      computed: {
        reversedMessage: {
          get: function () {
            return "get: " + this.message
          },
          set: function (newValue) {
            this.message = newValue
          }
        }
      }
    })
    vm.reversedMessage = '袖罗垂影瘦';
    document.write('data: ' + vm.message);

  </script>
</body>

</html>
  • 输出

如下可见，get中的输出变了，打印data中的message值也变了。

在这里插入图片描述

2. methods（方法选项）

语法示例

  • 引用
<p>方法回文: {{ reversedMessage() }}</p>
  • 定义
computed: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

完整示例

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <p>原始字串: {{ message }}</p>
    <p>方法回文: {{ reversedMessage() }}</p>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: '鸦啼正落花'
      },
      methods: {
        reversedMessage: function () {
          return this.message.split('').reverse().join('')
        }
      }
    })
  </script>
</body>

</html>

N. 比较 computed & methods

不同点

  • computed： 只有相关依赖发生改变时才会重新取值
  • methods： 在重新渲染的时候，函数总会重新调用执行

完整示例

为了看到computed的缓存效果，我们将两个方法多次打印，并且每次打印的时候加上一个计数值。
如果是缓存，那么计数值不会变化。
如果重新调用，那么计数值会增加。

  • 代码
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <p>原始字串: {{ message }}</p>
    <p>===============计算回文================</p>
    <p>计算回文: {{ reversedMessage }}</p>
    <p>计算回文: {{ reversedMessage }}</p>
    <p>计算回文: {{ reversedMessage }}</p>
    <p>===============方法回文================</p>
    <p>方法回文: {{ reversedMessage2() }}</p>
    <p>方法回文: {{ reversedMessage2() }}</p>
    <p>方法回文: {{ reversedMessage2() }}</p>
  </div>

  <script>
    var cut = 1
    var vm = new Vue({
      el: '#app',
      data: {
        message: '鸦啼正落花'
      },
      computed: {
        reversedMessage: function () {
          cut += 1
          return cut + ":" + this.message.split('').reverse().join('')
        }
      },
      methods: {
        reversedMessage2: function () {
          cut += 1
          return cut + ":" + this.message.split('').reverse().join('')
        }
      }
    })
  </script>
</body>

</html>
  • 结果显示
    在这里插入图片描述

3. 过滤器

语法示例

定义过滤器

    new Vue({
      ……
      filters: {
      }
    })

使用过滤器

将数据用管道符传到后边的表达式中，有如下两种方式：

  • 两个大括号
{{ message | 过滤器名 }}
  • 在v-bind中使用
<div v-bind:id="rawId | formatId"></div>

完整示例

如下，message 的值通过管道符传给 capitalize。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW SONG</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
  <div id="app">
    {{ message | capitalize }}
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'guanyu'
      },
      filters: {
        capitalize: function (value) {
          if (!value) return ''
          value = value.toString()
          return value.charAt(0).toUpperCase() + value.slice(1)
        }
      }
    })
  </script>
</body>

</html>

使用示例（过滤器串联）

{{ message | filterA | filterB }}

使用示例（ 过滤器传参）

{{ message | filterA('arg1', arg2) }}

说明：

  • filterA的第一个参数： message
  • filterA的第二个参数： 字串 arg1
  • filterA的第三个参数： 变量 arg2

玄德公笔记
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Vue.js计算机属性computed和methods方法详解
10-16
主要为大家详细介绍了Vue.js计算机属性computed和methods方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue 中 filter 与 computed 的区别与用法解析
12-13
watch与computed、filter： watch:监控已有属性，一旦属性发生了改变就去自动调用对应的方法 computed:监控已有的属性,一旦属性的依赖发生了改变，就去自动调用对应的方法 filter:js中为我们提供的一个方法，用来帮助我们对数据进行筛选 watch与computed的区别: 1.watch监控现有的属性,computed通过现有的属性计算出一个新的属性 2.watch不会缓存数据，每次打开页面都会重新加载一次， 但是computed如果之前进行过计算他会将计算的结果缓存，如果再次请求会从缓存中 得到数据（所以computed的性能比watch更好一些） 最近遇到一
Vue.js 计算属性
qq_42243957的博客
08-09 225
计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子： 计算属性的实例： 可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 </title> <script src="ht
Vue中的methods配置项中的箭头函数this指向及相关源码分析
D-的博客
04-15 7103
之前在使用Vue时遇到一个问题，我们知道在Vue的methods中定义函数时，要想使用到Vue实例或者组件实例的this时，我们就不能使用箭头函数定义方法，因为箭头函数中的this是在函数定义时生成的，并不是函数调用使用时生成。但是我们如果使用了箭头函数，那么其中的this指向哪里呢?我刚开始也是以为肯定是指向Window的,这仅仅是局限于用script映入vue.js时才会指向Window,但其实在Vue-cli中，如果使用箭头函数定义了methods中的方法，那么this是指向undefined的。
PHP面向对象
weixin_30291791的博客
08-14 92
面向对象是一种 计算机编程架构，比面向过程编辑具有更强的灵活性和扩展性。面向对象编辑也是一个程序员发展的“分水岭”，很多的初学者和略有成就的开发者，就是因为无法 理解“面向对象”而放弃。这里想提醒一下初学者：要想在编程这条路上走得比别人远，就一定要掌握面向对象编程技术。 一、 面向对象的基本概念 这 里所指的面向对象，准确地说应该叫做面向对象编程(OOP)，是面向对...
浅析Vue中的计算属性和数据属性。
weixin_45878279的博客
04-16 343
数据属性是Vue实例中用来存储数据的属性。它们通常用来存储应用程序的状态信息，例如用户输入的文本、选中的选项等。在Vue实例中，可以使用data选项来定义数据属性。计算属性是Vue实例中用来定义基于其他数据动态计算出来的属性的属性。它们通常用来处理复杂的逻辑，例如根据多个数据属性计算出一个新的值。计算属性的值是动态计算出来的，当它所依赖的数据发生变化时，它的值也会相应地更新。在Vue实例中，可以使用computed选项来定义计算属性。
Vue的四个常用选项
程序员柒的博客
12-14 1747
本文讲解了vue.js中的四个常用选项，4个参数选项：filters（过滤器）、computed（计算属性）、methods（方法）、watch（观察），如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力。提示：以下是本篇文章正文内容，下面案例可供参考我们都知道，定义一个Vue实例的参数选项除了有el（指定挂载的DOM元素）、data（实例的数据）之外，还可以定义其他的参数。
【Vue】三、Vue.js的常用选项
weixin_43333483的博客
12-24 1167
Vue.js的常用选项
VUE 四个常用选项
ikEason_的博客
12-22 1459
一、 VUE 四个常用选项 1. filter 过滤器 过滤就是一个数据经过了这个过滤之后出来另一样东西，可以从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。例如，从[‘abc’,‘abd’,‘ade’]数组中取得包含‘ab’的值，那么可通过过滤器筛选出来‘abc’和‘abd’；把‘Hello’变成‘Hello World’，那么可用过滤器给值‘Hello’后面添加上‘ World’；或者把时间节点改为时间戳等等都可以使用过滤器。 语法1: {{ message | filte
vue取div当前宽度_浅析Vue进阶属性“computed、watch”
weixin_39605894的博客
11-21 473
计算属性 - computed计算属性就是被计算出来的属性就叫计算属性，列如用来展示用户名，或者用户列表展示等等。举个栗子吧栗子正常注册表用户名、邮箱、电话，用于优先展示用户名。new 但是可能会出现用户没有填写昵称，遇到没有填写昵称的情况下就优先展示邮箱。如果需要在多个网页展示用户名的话就得多写{{user.nickname || user.email || user.phone}} 。代码升级...
vue2-filters：Vue.js过滤器的集合
02-06
vue2-过滤器 集合Vue.js过滤器。安装直接包含只需在Vue之后包含vue2-filters ，它会自动安装： < script src =" vue.js " > </ script >< script src =" vue2-filters.min.js " > </ script &...
Vue.js -- 过滤器使用总结
10-20
本篇文章主要介绍了Vue.js -- 过滤器使用总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-async-computed：Vue.js的异步计算属性
02-06
Vue异步计算 使用此插件，您可以在Vue中具有异步计算的计算属性。 如果不使用此插件，则无法执行以下操作： new Vue ( { data : { userId : 1 } , computed : { username ( ) { // Using vue-resource ...
vue-pull-refresh-Vue.js 2.0的刷新刷新组件。-Vue.js开发
05-27
vue-pull-refresh vuejs 2.0针对移动设备实现的下拉刷新组件。 演示演示PS：请使用支持Promise用法的浏览器安装vue-pull-refresh vuejs 2.0用于移动设备的下拉刷新组件实现。 演示演示PS：请使用支持Promise用法的...
vue-fullpage.js-Vue.js的官方fullPage.js组件。-Vue.js开发
05-27
感谢VasiliyGryaznoy，dragg和Raphael Owino目录安装许可证使用选项方法使用Nuxt.js进行回调的用法贡献资源安装终端：//使用bower bower install vue-fullpage.js //使用npm npm install --save vue-fullpage .js...
2021-08-02 nuxt.js+i18n做国际化项目，达到语言切换；以及使用i18n时的踩坑记录；
m0_52714582的博客
08-02 2224
nuxt.js + vue-i18n开发国际化项目 接到公司项目要做一个国际化的官网、之前一直没有搞过，百度了一下也不是很难；记录一下； 步骤一：安装vue+i18n npm install vue-i18n 或 yarn add vue-i18n 步骤二：在store文件夹下更新index.js文件 export const state = () => ({ locales: ['en', 'zh'], locale: 'zh' }) export const mu
VUE中常用的几种选项
On the way
08-10 655
常用选项 vue有许多配置选项，这节之类出常用的一些选项 1、computed计算属性：主要是对原数据进行改造输出。改造输出：包括格式化数据（价格，日期），大小写转换，排序，添加符号 computed: { newPrice () { return '￥' + this.price + '元'; } } 2、methods方法属性：用于绑定html中的事件对应的方法 methods:{ add (num) { this.co...
asyncComputed异步计算属性
qq_41438582的博客
06-30 2982
前言： vue里普通的计算属性computed只能计算一些同步的值，但是如果碰到需要在计算属性中发送一些异步的网络请求，需要用vue-async-computed异步计算属性 场景： 如下图1，红框灰色背景的小卡片已封装成一个组件，卡片内的数据类型值需要做判断后返回值显示，如果组件外部传进的值dataType！==quote，则原样显示，否则需要调用接口查名称 用法： <ElTag size="small" :type="tagType" >{{ userInfo }}</.
TodoMVC-vue.js的js文件
最新发布
05-17
以下是TodoMVC-vue.js的js文件： ```javascript /*global Vue, todoStorage */ (function (exports) { 'use strict'; // 定义过滤器 var filters = { all: function (todos) { return todos; }, active: function (todos) { return todos.filter(function (todo) { return !todo.completed; }); }, completed: function (todos) { return todos.filter(function (todo) { return todo.completed; }); } }; // TodoMVC 应用程序 var app = new Vue({ // 应用程序绑定的根元素 el: '.todoapp', // 应用程序的数据 data: { todos: todoStorage.fetch(), newTodo: '', editedTodo: null, visibility: 'all' }, // 计算属性 computed: { filteredTodos: function () { return filters[this.visibility](this.todos); }, remaining: function () { return filters.active(this.todos).length; }, allDone: { get: function () { return this.remaining === 0; }, set: function (value) { this.todos.forEach(function (todo) { todo.completed = value; }); } } }, // 观察者 watch: { todos: { deep: true, handler: todoStorage.save } }, // 方法 methods: { addTodo: function () { var value = this.newTodo && this.newTodo.trim(); if (!value) { return; } this.todos.push({ title: value, completed: false }); this.newTodo = ''; }, removeTodo: function (todo) { this.todos.splice(this.todos.indexOf(todo), 1); }, editTodo: function (todo) { this.beforeEditCache = todo.title; this.editedTodo = todo; }, doneEdit: function (todo) { if (!this.editedTodo) { return; } this.editedTodo = null; todo.title = todo.title.trim(); if (!todo.title) { this.removeTodo(todo); } }, cancelEdit: function (todo) { this.editedTodo = null; todo.title = this.beforeEditCache; }, removeCompleted: function () { this.todos = filters.active(this.todos); } }, // 自定义指令 directives: { 'todo-focus': function (el, binding) { if (binding.value) { el.focus(); } } } }); // 应用程序启动后，将输入框聚焦 app.$nextTick(function () { app.newTodo = ''; }); exports.app = app; })(window); ``` 这是一个使用了Vue.js框架的TodoMVC应用程序的JavaScript文件。其中定义了一些过滤器、计算属性、观察者、方法和自定义指令，用于实现TodoMVC应用程序的各种功能，比如添加、删除、编辑、筛选和保存待办事项等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

玄德公笔记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值