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 篇文章 1 订阅

订阅专栏

点击查看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

9547

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

vue过滤器 v-if v-else的使用

weixin_45265095的博客

07-22

934

vue过滤器 <div id="app"> <input type="text" v-model="name" /> {{name|UpFormatFiter}} <p v-text="name"></p> <input type="text" v-model="date" /> {{date|DateFormatFiter}} <p v-text="date"></p>

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

Vue指令之v-model详解

weixin_51743499的博客

07-23

779

通过结合v-bind和v-model，我们可以动态生成表单元素并进行数据绑定。这使得 Vue.js 在处理动态数据和复杂表单时变得非常灵活和强大。在这些例子中，v-bind用于动态生成表单选项，而v-model则处理数据的双向绑定。

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

10-17

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

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

AQUROEAN

07-05

1811

错误原因：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

1037

备注：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）一

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

weixin_43501588的博客

04-24

3140

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

v-model使用过滤器

09-07

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

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

z19950712的博客

12-17

1259

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

680

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

v-model的使用

qq_35176916的博客

02-25

923

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

Vue简单实例——过滤器

hssjsh的博客

10-27

718

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

2021-06-02 学习记录--表单绑定v-model + 过滤器写法

weixin_48850734的博客

06-29

207

v-model可用于 input / textarea

Vue05--v-if、v-show、filters(过滤器)、v-model

gaxing4615的博客

03-23

1157

v-if v-else-if v-else 条件判断。当其为true是会渲染数据和显示dom元素。否则不会显示。 <div v-if="fSize==10">显示true</div> <div v-else-if="fSize<10">显示else </div> <div v-else>显示false</div>...

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