v-model里使用过滤器

最新推荐文章于 2024-08-26 08:59:48 发布

iamjwe

最新推荐文章于 2024-08-26 08:59:48 发布

阅读量2.3w

点赞数 6

分类专栏： Vue 文章标签： v-model里使用过滤器

来自清心的博客

本文链接：https://blog.csdn.net/jw2268136570/article/details/88733531

版权

Vue 专栏收录该内容

3 篇文章

订阅专栏

点击查看filter文档

文档所述过滤器只能用在v-bind指令和{{}}表达式中，v-model中使用过滤器是一种思维误区。

因为v-model里实现数据显示和存储格式的转换应该是双向的。如下例：

  computed: {
    sex: {
      get: function () {
        return this.info.sex === 1 ? '男' : this.info.sex === 0 ? '女' : '未知'
      set: function (value) {
        this.info.sex = value === '男' ? 1 : 0
      }
    }
  },

这里的过滤应该是双向的：
1.数据显示时性别由数字转为文字
2.数据存储时性别由文字转为数字

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iamjwe

关注关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

v-model中使用过滤器

u011200562的博客

12-16

9788

v-model不能使用过滤器（filter）如果v-model绑定的数据需要修改格式，例如input输入框只能输入汉字，数字和字母等都需要过滤掉方法一：使用computed，但是多个框时computed不能很好的复用 <el-input style="width: 217px" v-model="tagName" type="text" size="mini"

v-model 总结

最新发布

SUNGUOGUO1的博客

03-25

1073

的数据绑定。

3 条评论您还未登录，请先登录后发表或查看评论

vue2 v-model/v-text 中使用过滤器的方法示例

10-17

主要介绍了vue2 v-model/v-text 中使用过滤器的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

Vue使用v-model收集各种表单数据、过滤器

Bulut0907

08-26

1100

不是必须要用的，用计算属性、method方法也可以实现。不传时间戳，默认就是当前时间。

Vue中要在v-model里使用过滤器

AQUROEAN

07-05

1872

错误原因：https://cn.vuejs.org/v2/guide/filters.html中有阐述，过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。

FE_Vue学习笔记常用指令的学习【v-model filters v-text v-html v-cloak v-once v-pre 自定义指令】

一个搬砖工人

05-13

1091

备注：v-model的三个修饰符： 过滤器定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。语法： v-text指令： 4 v-html 向指定节点中渲染包含html结构的内容 v-html指令：作用：向指定节点中渲染包含html结构的内容。与插值语法的区别： 1）v-html会替换掉节点中所有的内容，{{ xxx }}则不会。 2）v-html可识别html结构。严重注意：v-html有安全性问题！ 1）在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。 2）一

v-model使用过滤器

09-07

但是 v-model 指令不支持直接使用过滤器，因为过滤器只能用于模板表达式中，而 v-model 是一个指令。如果你想对 v-model 绑定的数据进行过滤，可以使用计算属性或者自定义指令来实现。下面是两种常用的方法： 1. ...

学习vue的第5天，v-for，v-model的原理以及用法等

qq_34176561的博客

05-26

503

购物车，循环遍历，v-for的购物车价格的小数点方法是vue自带的过滤器，filters 管道符号 | vue允许自定义过滤器， filters：{ showPrice(传价格){ let pricestr = price.toFixed(2) return `￥${pricestr}` } } 可以进行文本格式化 v-for 原理 <li v-for="item in name"></li> <li v-

v-model源码深入解析(超详细)

r1211111的博客

11-19

3593

抛出问题我们先来看一下下面这段代码 <template> <div> <div class="message">{{ info.message }}</div> <div><input v-model="info.message" type="text"></div> <butt...

vue2 v-model/v-text 中使用过滤器

weixin_43501588的博客

04-24

3210

vue2 v-model/v-text 中使用过滤器 Vue.js 允许自定义过滤器，一般可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：  {{ message | capitalize }} <!-- 在 v-bind 中 -...

Vue简单实例——过滤器

hssjsh的博客

10-27

777

Vue简单实例——过滤器的简单介绍和一个简单的实例

解决v-model或者v-text中使用过滤器进行脱敏不生效的问题

z19950712的博客

12-17

1330

vue.js允许我们自定义过滤器，可以用来处理一些常用的文本格式化，但是过滤器只能用在两个地方，双括弧插值（{{}}）和v-bind 表达式（后者聪vue2.1.0+才开始支持），并且filter应该被定义在js表达式的尾部，通常放在vue框架的methods下面；但是有时候我们需要在v-model/v-text中使用脱敏，这里分别提供两种方法； 1、使用v-model进行过滤器脱敏 <template> <div id="app"> <input type="text"

【vue】v-model、v-if、v-for、过滤器（12.31下午实训）

qq_45746744的博客

12-31

734

双向绑定指令 v-model vue 提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。注意：v-model 指令只能配合表单元素一起使用！为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是： ①.number 自动将用户的输入值转为数值类型 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &

Vue学习记录3，Vue监视数据的原理及案例，收集表单数据和v-model的三个修饰符及其案例，过滤器及其案例，内置指令，自定义指令及完成两个需求的自定义指令案例

qq_49080239的博客

07-31

431

1、vue会监视data中所有层次的数据。 2、如何监测对象中的数据？通过setter实现监视，且要在new Vue时就传入要监测的数据。 (1).对象中后追加的属性，Vue默认不做响应式处理 (2).如需给后添加的属性做响应式，请使用如下API： 3、如何监测数组中的数据？通过包裹数组更新元素的方法实现，本质就是做了两件事： (1)调用原生对应的方法对数组进行更新。 (2)重新解析模板，进而更新页面。 4、在Vue修改数组中的某个元素一定要用如下方法：（1）使用这些API:、、、、、、reverse

v-model的使用

qq_35176916的博客

02-25

965

组件中v-model的使用： v2.2以前的版本是这样应用的， <body> <div id="app"> <h1>组件中v-model的使用</h1> <h1>1,子组件中props要有value属性，2:子组件动态绑定value至props,3，子组件触发input事件后触发$emit&l..

使用 v-model 后 filter 失效怎么办

热门推荐

爱coding的小蕾蕾

08-29

1万+

使用 v-model 后 filter 失效怎么办

v-model 使用过滤器

03-14

在 Vue.js 中，`v-model` 实现的是双向绑定功能。然而，在 Vue 2.x 版本中可以通过自定义过滤器来修改输入值并同步更新到模型上[^1]。需要注意的是，Vue 官方并不推荐直接在 `v-model` 的绑定过程中使用过滤器，因为这可能会导致逻辑复杂化以及难以维护的代码结构。以下是通过自定义方法而非内置过滤器的方式实现类似效果的一个例子： ### 自定义过滤器模拟 #### 场景描述假设我们希望用户输入的内容自动转换为大写字母形式显示，并且保持双向绑定的功能。 ```html <div id="app"> <input type="text" v-model="filteredMessage"> <p>Filtered Message: {{ filteredMessage }}</p> </div> <script> var app = new Vue({ el: '#app', data: { rawMessage: '' }, computed: { filteredMessage: { get() { return this.rawMessage.toUpperCase(); // 将原始消息转为大写展示 }, set(newValue) { this.rawMessage = newValue.toLowerCase(); // 输入时强制转换为小写存储 } } } }); </script> ``` 在这个示例中，`computed` 属性被用来创建了一个带有 getter 和 setter 方法的计算属性 `filteredMessage`。当用户更改输入框中的内容时，setter 方法会捕获新的值并将其转化为小写保存；而 getter 则负责将存储的小写字符串转换成大写供页面显示[^5]。对于 Vue 3 用户来说，可以利用组合式 API (`Composition API`) 来达到同样的目的: ```javascript import { ref, computed } from 'vue'; export default { setup() { const rawMessage = ref(''); const filteredMessage = computed({ get: () => rawMessage.value.toUpperCase(), set: (newValue) => { rawMessage.value = newValue.toLowerCase(); } }); return { filteredMessage }; } }; ``` 以上代码展示了如何在现代 JavaScript 应用程序框架 Vue.js 下操作数据流，确保界面与底层状态之间的一致性和灵活性的同时也提供了简单的文本变换能力[^4]。