Vue过滤器和修饰符

最新推荐文章于 2024-05-17 14:32:46 发布
最新推荐文章于 2024-05-17 14:32:46 发布
阅读量36 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52182385/article/details/128461872
版权

学习目标：

  • 学习品牌管理的案例
  • vue的过滤器

学习内容：品牌管理案例

实现功能

  1. 添加，删除，修改，查找
1、搭建基本界面结构
  1. 引入bootstrap
  2. 引入Vue
  3. 使用v-for进行渲染
2、实现添加功能
  1. 拿到输入的数据
  2. 用这个数据构造一个对象
  3. 可以调用数组的方法把这个对象，插入到数组里
  4. 因为vue已经帮我们实现了双向绑定。Vue会监听数据的改变，数据改变之后，vue会帮我们渲染到指定地方。
3、实现删除功能：使用foreach遍历
  1. 使用foreach遍历
  2. 使用数组的splice方法
4、实现查找功能

  1. ES6里的filter方法：ilter方法直接会返回一个新的数组

  2. filter的回调方法中返回的是bool值，如果这个bool值是true的话就会被加入到新的数组中

  3. ` let newList = this.list.filter(item => {

     if (item.name.includes(this.keyword)) {
     return true;
 }
 }`
5、实现修改功能
  1. 需要设置一个中转函数来存放原item的值
  2. 把新获取到的值赋给中转函数中的值即可
6、过滤器
  1. 过滤器可以用在两个地方：mustache插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示。
  2. 使用方法：
    {{变量 | 过滤器名}}
    {{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值
  3. 全局和局部（私有）定义
    全局
    通过Vue提供的filter方法定义：Vue.filter()
    参数：过滤器的名字或过滤器执行函数
    局部（私有）
    filters这个是实例化Vue的一个参数，和data,methods平 级的，里面放的就是我们这个实例的私有过滤器

品牌管理代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
      crossorigin="anonymous"
    />
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
      integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div id="app">
      <div class="container">
        <div class="panel panel-info">
          <div class="panel-heading">
            <h3 class="panel-title">添加品牌</h3>
          </div>
          <div class="panel-body">
            <form action="" method="POST" class="form-inline" role="form">
              <div class="form-group">
                <label class="" for="">Id:</label>
                <input
                  type="text"
                  class="form-control"
                  id=""
                  placeholder="Input field"
                  v-model="carId"
                />
              </div>
              <div class="form-group">
                <label class="" for="">Name:</label>
                <input
                  type="text"
                  class="form-control"
                  id=""
                  placeholder="Input field"
                  v-model:value="carName"
                />
              </div>

              <button type="button" class="btn btn-primary" @click="addCar">
                添加
              </button>
              <div class="form-group">
                <label class="" for="">搜索名称关键字:</label>
                <input
                  type="text"
                  class="form-control"
                  id=""
                  placeholder="Input field"
                  v-model="searchKey"
                />
              </div>
            </form>
          </div>
          <table class="table table-hover table-bordered">
            <thead>
              <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Ctime</th>
                <th>Operation</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in getCarList()" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.carName}}</td>
                <td>{{item.cTime | setTime('YYYY/MM/DD-ho:mi:se')}}</td>
                <td>
                  <button
                    type="button"
                    class="btn btn-danger"
                    data-toggle="modal"
                    data-target="#myModal"
                    @click="trans(item)"
                  >
                    删除
                  </button>
                  <button
                    type="button"
                    class="btn btn-danger"
                    data-toggle="modal"
                    data-target="#myModal2"
                    @click="trans(item)"
                  >
                    修改
                  </button>
                  <!-- 模态框（Modal） -->
                  <div
                    class="modal fade"
                    id="myModal"
                    tabindex="-1"
                    role="dialog"
                    aria-labelledby="myModalLabel"
                    aria-hidden="true"
                  >
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button
                            type="button"
                            class="close"
                            data-dismiss="modal"
                            aria-hidden="true"
                          >
                            &times;
                          </button>
                          <h4 class="modal-title" id="myModalLabel">
                            提示提示提示提示提示
                          </h4>
                        </div>
                        <div class="modal-body">真的要删除吗</div>
                        <div class="modal-footer">
                          <button
                            type="button"
                            class="btn btn-default"
                            data-dismiss="modal"
                          >
                            算啦
                          </button>
                          <button
                            type="button"
                            class="btn btn-primary"
                            data-dismiss="modal"
                            @click="deleteCar()"
                          >
                            我真的要删它
                          </button>
                        </div>
                      </div>
                      <!-- /.modal-content -->
                    </div>
                    <!-- /.modal -->
                  </div>
                  <!-- 模态框（Modal） -->
                  <div
                    class="modal fade"
                    id="myModal2"
                    tabindex="-1"
                    role="dialog"
                    aria-labelledby="myModalLabel"
                    aria-hidden="true"
                  >
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button
                            type="button"
                            class="close"
                            data-dismiss="modal"
                            aria-hidden="true"
                          >
                            &times;
                          </button>
                          <h4 class="modal-title" id="myModalLabel">
                            提示！！！！！！！！！
                          </h4>
                        </div>
                        <div class="modal-body">
                          <form class="form-horizontal" role="form">
                            <!-- <div class="form-group">
                              <label
                                for="firstname"
                                class="col-sm-2 control-label"
                                >ID</label
                              >
                              <div class="col-sm-10">
                                <input
                                  type="text"
                                  class="form-control"
                                  id="firstname"
                                  placeholder="请输入修改后的ID"
                                  v-model="newid"
                                />
                              </div>
                            </div> -->
                            <div class="form-group">
                              <label
                                for="lastname"
                                class="col-sm-2 control-label"
                                >Name</label
                              >
                              <div class="col-sm-10">
                                <input
                                  type="text"
                                  class="form-control"
                                  id="lastname"
                                  v-model="newCarName"
                                  placeholder="请输入修改后的Name"
                                />
                              </div>
                            </div>
                          </form>
                        </div>
                        <div class="modal-footer">
                          <button
                            type="button"
                            class="btn btn-default"
                            data-dismiss="modal"
                          >
                            算啦不改了
                          </button>
                          <button
                            type="button"
                            class="btn btn-primary"
                            data-dismiss="modal"
                            @click="change()"
                          >
                            我真的要改了它
                          </button>
                        </div>
                      </div>
                      <!-- /.modal-content -->
                    </div>
                    <!-- /.modal -->
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </body>
  <script>
    Vue.filter("setTime", function (data, format) {
      let y = data.getFullYear();
      let m = (data.getMonth() + 1).toString().padStart(2, 0);
      let d = data.getDate().toString().padStart(2, 0);
      let hours = data.getHours().toString().padStart(2, 0);
      let minutes = data.getMinutes().toString().padStart(2, 0);
      let seconds = data.getSeconds().toString().padStart(2, 0);
      return format
        .replace("YYYY", y)
        .replace("MM", m)
        .replace("DD", d)
        .replace("ho", hours)
        .replace("mi", minutes)
        .replace("se", seconds);
    });
    const vm = new Vue({
      el: "#app",
      data: {
        carId: "",
        carName: "",
        searchKey: "",
        carList: [
          {
            id: 1,
            carName: "奔驰g500",
            cTime: new Date(),
          },
          {
            id: 2,
            carName: "奥迪R8",
            cTime: new Date(),
          },
        ],
        // newid: "",
        newCarName: "",
        transf: "",
      },
      methods: {
        // 添加
        addCar() {
          let obj = {
            id: this.carId,
            carName: this.carName,
            cTime: new Date(),
          };
          if (this.carList.find((item) => item.id == this.carId)) {
            alert("Id重复");
          } else {
            this.carList.push(obj);
          }
          this.carId = "";
          this.carName = "";
          //
        },
        // 删除
        deleteCar() {
          this.carList.splice(this.carList.indexOf(this.transf), 1);
        },
        getCarList() {
          return this.carList.filter((item) => {
            return item.carName.includes(this.searchKey);
          });
        },
        change(item) {
          // this.transf.carId = this.newid;
          this.transf.carName = this.newCarName;
        },
        trans(item) {
          this.transf = item;
        },
      },
    });
  </script>
</html>

学习时间：2022.12.27

扩充：

  1. padStart()
    这个是字符串提供的方法，所以我们先要保证调用的地方是个字符串
    这个方法里两个参数 -
    显示的位数
    位数不足时在前面补充的内容
let d = data.getDate().toString().padStart(2, 0);

举例为获取时间的时候不足两位的时候补零
2. padEnd()
和上面用法一样，这个是在后面补一个值

  • 技术笔记 2 遍
  • CSDN 技术博客 3 篇
  • 习的 vlog 视频 1 个
loveAsuka_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue事件修饰符和按键修饰符用法总结
12-03
之前关于vue事件修饰符和按键修饰符的一点分析，最近需要回顾，就顺便发到随笔上了 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现...
vue过滤器和修饰符
Llishiyi的博客
01-05 418
一，过滤器 概念 Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”（|）符指示。 官方文档 作用 在我们页面显示值之前加一层过滤，展示我们过滤后的值 注意事项 过滤器可以用在两个地方：双花括号插值和v-bind表达式 使用语法 {{变量 | 过滤器名}} {{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，后面过滤器的data就是...
【Vue过滤器和修饰符】
hjdhdhdhd的博客
11-17 83
可被用作一些常见的文本格式化过滤器应该被添加在JavaScript表达式的尾部，由**“管道”符**指示双花括号插值和v-bind 表达式作用：在我们页面显示值之前加一层过滤，展示我们过滤后的值1、{{变量 | 过滤器名}}2、{{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值通过Vue提供的filter方法定义：Vue.filter()1、第一个参数：过滤器的名字。
methods vue过滤器 和_vue过滤器和修饰符
weixin_39832965的博客
12-21 52
vue过滤器和修饰符1、过滤器Vue.js允许你自定义过滤器，过滤器可以用在两个地方(1)mustache插值 和 v-bind表达式 添加在JavaScript表达式的尾部由“管道”符指示。作用：在我们页面显示值之前加一层过滤，展示我们过滤后的值。注意事项过滤器可以用在两个地方：双花括号插值和v-bind表达式使用语法{{变量|过滤器名}}{{变量|过滤器|另一个过滤器}}可以同时使用多...
vue过滤器和修饰符以及示例
mgaga的博客
10-28 64
第一个参数：指令的名字 定义是时不加v- 使用时加上v-第二个参数：对象bind:只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置inserted 这个元素已经渲染到界面上之后执行update 当元素有更新的时候执行● 实例里有个directives属性，这个属性是个对象● 里面放的就是我们指令，这个对象键就是指令的名字，后面的对象就是指令的内容，和全局定义是一样的● 简写直接写一个函数，函数名就是指令的名字，其他和全局定义是一样的。
1-2 vue过滤器和修饰符
aadcb的博客
03-22 76
过滤器的概念及作用 概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示。 作用：在我们页面显示值之前加一层过滤，展示我们过滤后的值（注意：过滤器可以用在两个地方：双花括号插值和 v-bind 表达式） 全局定义：通过Vue提供的filter方法定义：Vue.filter() 例： 私有定义：filters这个是实例化Vue的一个参数，和data,meth
VUE过滤器与修饰符-vue day02
蜗牛的博客
09-20 200
操作 DOM 与使用 VUE 思想的转换 谨记：数据驱动视图
vue 过滤器和修饰符与基础
m0_70910282的博客
07-05 93
过滤器使用方式 {{变量 | 过滤器名}}可以同时使用多个和连着使用自定义按键 //创建指令Vue.config.keyCodes.f = 70let quan = new Vue({ el:".app", data :{}, methods:{ an(){ alert("提交成功"...
2021-06-22 vue过滤器和修饰符
Releases_1的博客
06-23 60
前言 任务 学习品牌管理的案例 学习vue的过滤器 学习按键修饰符 自定义vue的指令 一、品牌管理案例 步骤： <!-- 1.书写静态页面 页面可以使用BS，先引入 2，分析数据，哪些需要定义在data里面 3，绑定相应事件，完成操作 二、过滤器 `` 三、计算器 let str = Number(this.num1) + this.opration + Number(this.num2); this.sum = eval(str) //eval() 函数可计算某个字符串，并
Vue 按键修饰符处理事件的方法
08-27
主要介绍了Vue 按键修饰符的相关资料，vue中新增按键修饰符和系统修饰符来处理类似的事件，具体内容详情大家参考下本
vue 之 .sync 修饰符示例详解
12-09
在vue 1.x 中的 .sync 修饰符所提供的功能。当一个子组件改变了一个带 .sync 的prop的值时，这个变化也会同步到父组件中所绑定的值。 这很方便，但也会导致问题，因为它破坏了单向数据流。（数据自上而下流，事件...
如何理解Vue的.sync修饰符的使用
12-29
本文介绍了Vue的.sync修饰符的使用，分享给大家，也给自己留个笔记 案例 <div>{{bar}} <my foo.sync=bar></my> <!-- <my foo=bar update:foo=val> bar = val></my> --> [removed] Vue.component('my-...
HOW - Canvas 入门系列之基于vue-konva的多维表格（四）
weixin_58540586的博客
05-17 1192
今天我们将将基于vue-konva 实现的一个表格渲染的组件。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 681
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue中的事件
weixin_43390711的博客
05-16 165
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1130
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Vue.js的发展史（一）
2301_79683791的博客
05-15 760
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
Vue3实战笔记（23）—路由Vue-Router 实战指南（关于路由命名那点事儿）
山花的博客
05-15 1042
除了 path 之外，你还可以为任何路由提供 name。在 Vue Router 中，命名路由是一种通过指定名称来标识路由的方式，而不是使用路径。这为路由的跳转提供了一种更直观和易于维护的方式。命名路由特别有用，尤其是在链接到路由时，不必硬编码 URL，也不必在路由对象中查找路径字符串。},在这个例子中，我们给路径为 /user/:username的路由命名为 user。User在这两种情况下，路由将导航到路径 /user/erina。
vue过滤器和js原生过滤器
06-03
Vue的过滤器和原生JavaScript的过滤器有一些相似之处，但也存在一些不同。 Vue的过滤器是一种用于处理文本格式化的方式，类似于管道。你可以在模板中使用它们来将值转换成所需的格式。Vue的过滤器可以在模板中使用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值