【Vue3.0】Vue3.0简介-指令-过滤器-案例D2.0

最新推荐文章于 2024-04-25 08:59:22 发布
最新推荐文章于 2024-04-25 08:59:22 发布
阅读量369 收藏 1
点赞数 1
分类专栏： Web前端文档 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42445425/article/details/127194346
版权

【Vue3.0】Vue3.0简介-指令-过滤器-案例

一、Vue3.0简介

1.1、vue3.0与vue2.0对比

  • vue2.0中绝大多数的API与特性，在vue3.0中同样支持。但是vue3.0中新增了特有的功能，也废弃了某些2.0的旧功能。
  • 【新增】
    • 组合式API
    • 多根节点组件
    • 更好的TypeScript支持
  • 【废弃】
    • 过滤器
    • 不再支持$no,$of,$once实例方法等

二、Vue3.0基本使用

2.1、基本使用步骤

  • 1.导入vue.js的script脚本文件
  • 2.在页面中声明一个将要被vue所控制的DOM区域
  • 3.创建vm实例对象(vue实例对象)
  • 4.编码实现如下：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viveport" content="width=device-width, initial-scale=1.0" />
    <title>douglas</title>
    <body>
      <!-- 2.在页面中声明一个将要被vue所控制的DOM区域 -->
      <div id="app">{{username}}</div>
      <!-- 1.导入vue.js的script脚本文件 -->
      <script src="./lib/vue.js"></script>
      <!-- 3.编写js脚本 创建vm实例对象 -->
      <script>
        const vm = new Vue({
          //3.1 指定当前 vm 实例要控制页面的那个区域
          el: '#app',
          //3.2 指定Model数据源
          data: {
            username: 'DOUGLAS'
          }
        })
      </script>  
    </body>
  </head>
</html>

三、Vue3.0指令使用

3.1、指令概念

  • 指令是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构
  • 【指令分类】按照不同用途分为六大类
    • 内容渲染指令
    • 属性绑定指令
    • 事件绑定指令
    • 双向绑定指令
    • 条件渲染指令
    • 列表渲染指令

3.2、内容渲染指令

  • 【作用】用来辅助开发者渲染DOM元素的文本内容，常用的渲染指令如下：

  • v-text ：使用语法如下：【缺点】会覆盖原本标签内的默认值内容

<!--把username对应的值，渲染到第一个p标签中-->
<p v-text="username"></p>
<!-- 把gender对应的值，渲染到第二个p标签中-->
<!--注意：默认的文本“性别”会被gender的值覆盖掉-->
<p v-text="gender">性别</p>
  • {{}} ： 专门用来解决v-text会覆盖默认文本内容的问题，这种{{}}语法专业名称是插值表达式。
<!--使用 {{}} 插值表达式，将对应的值渲染到元素的内容节点中-->
<!--同时保留元素自身的默认值-->
<p>姓名：{{username}}</p>
<p>性别：{{gender}}</p>
  • v-html ： 专门用来渲染包含HTML标签的字符串内容，将内容渲染为页面的HTML元素 。
<!--假设 data中定义了名为discription的数据，值为包含html标签的字符串-->
<!-- '<h5 style="color:red;">I Love You</h5>'-->
<p v-html="discirption"></p>
  • 【小结】
    • v-text：指令的缺点：会覆盖元素内部原有的内容！
    • {{}}：插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！
    • v-html:可以把带有标签的字符串，渲染成真正的HTML内容！

3.3、属性绑定指令

  • 【作用】如果需要为元素的属性动态绑定属性值，则需要用到v-bind属性绑定指令。
  • 【语法】给placeholder属性动态绑定变量tips值
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viveport" content="width=device-width, initial-scale=1.0" />
    <title>douglas</title>
    <body>
      <div id="app">
        <!-- 使用 v-bind 指令 为input的placeholder 动态绑定属性值 -->
        <input type="text" v-bind:placeholder="tips">
        <!-- 使用 v-bind 指令 为img的src动态绑定属性值 -->
        <image v-bind:src="imgSrc" alt="" style="width:150px;"/>
      </div>
      <script src="./lib/vue.js"></script>
      <!-- 3.编写js脚本 创建vm实例对象 -->
      <script>
        const vm = new Vue({
          //3.1 指定当前 vm 实例要控制页面的那个区域
          el: '#app',
          //3.2 指定Model数据源
          data: {
            tips: 'DOUGLAS',
            imgSrc: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F1%2F53881da366da8.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667544511&t=5e93f5090418001533cb6ceb8d5f5a4a'
          }
        })
      </script>  
    </body>
  </head>
</html>
  • 【注意】v-bind:可以简化使用冒号可替代":"
  • 【使用JS表达式】 模板渲染可以是用js表达式，如下示例：
<!-- Vue渲染中除了支持绑定简单的数据值之外，还支持JS表达式的运算 -->
{{ number + 1}}  //插值表达式变量计算
{{ number > 99 ? '是' : '否'}}  //插值表达式支持三元运算符
{{ message.split('').reverse().join('') }} //插值表达式支持字符串切割并且翻转
//在使用v-bind属性绑定期间，可以对内容进行动态拼接，则字符串应该用单引号包裹
<div v-bind:id=" 'name-' + id "></div> 
<p>{{user.name}}</p>

3.4、事件绑定指令

  • 【作用】v-on事件绑定指令，用来监听DOM元素绑定事件。
  • 【语法】v-on:事件名称=“事件处理函数的名称”
<h3>count的值为:{{count}}</h3>
<!--给button按钮绑定一个事件,并且可在事件内进行传参-->
<button v-on:click="addCount(1)">点我count加1哟</button>
<!--在vm中的methods模块中，编写addCount事件执行函数体-->
methods:{
	addCount:function(n){
		this.count++;
	}
}
<!-- 简写形式，把 v-on:简写为 @ 符号 -->
<!-- 如果事件处理函数中的代码足够简单，只有一行代码，则则可以简写到行内 -->
<button @click="count += 1"> +1 </button>
  • 【注意】v-on可简写为’@’
  • 【拓展】原生态DOM对象有onClick、oninput、onkeyup等原生事件，在vue绑定事件之后均可为：
    • v-on:click、v-on:input、v-on:keyup

3.5、事件对象event

  • 在原生的DOM事件绑定中，可以再事件处理函数的形参处，接受事件对象event.同理在v-on指令（简写为@）所绑定的事件处理函数中，同样可以接受到事件对象event
  • 【案例】示例代码:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viveport" content="width=device-width, initial-scale=1.0" />
    <title>douglas</title>
    <body>
      <div id="app">
        <h3>count 值为：{{count}}</h3>
        <!-- $event是vue提供的特殊变量，用来表示原生的事件对象event，解决事件参数对象event被覆盖问题 -->
        <button @click="addCount(2, $event)"> +1 </button>
      </div>
      <script src="./lib/vue.js"></script>
      <!-- 3.编写js脚本 创建vm实例对象 -->
      <script>
        const vm = new Vue({
          //3.1 指定当前 vm 实例要控制页面的那个区域
          el: '#app',
          //3.2 指定Model数据源
          data: {
            count : 1
          },
          //3.3 方法区
          methods: {
              // 事件 addCount 
              addCount(param, e){ //接收事件参数对象 event 简写为 e
                const nowBgColor = e.target.style.backgroundColor
                // 按钮的背景颜色变色
                e.target.style.backgroundColor = nowBgColor === 'red' ? 'green' : 'red'
                this.count += param
              }
          }
        })
      </script>  
    </body>
  </head>
</html>

3.6、事件修饰符

  • 在事件处理函数中调用preventDefault()或stopPropagation()是非常常见的需求。因此vue提供了事件修饰符的概念，更方便的对事件的触发进行控制。
  • 【常用的事件修饰符】
    • .prevent:阻止默认行为（例如：阻止a链接的跳转、阻止表单的提交等）
    • .stop:阻止事件冒泡
    • .capture:以捕获模式触发当前的事件处理函数
    • .once：绑定的事件只触发1次
    • .self：只有在event.target是当前元素自身时触发事件处理函数
  • 【案例1】.prevent:阻止默认行为阻止默认行为(防止a链接的跳转，阻止表单的提交等)
<!--触发click点击事件时，阻止a链接的默认跳转行为-->
<a href="http://www.baidu.com" @click.prevent="show">点击跳转百度</a>
  • 【案例2】.stop:阻止事件冒泡，所谓事件冒泡：两个div盒子属于父子关系，点击子div只允许子div触发事件
// 在子div事件上增加阻止冒泡
<button @click.stop="show">百度一下</button>
  • 【案例3】.capture:以捕获模式触发，所谓捕获触发：两个父子div，点击任何地方都将先执行父div的事件
<div class="outer" @click.capture="onOuterClick">
	父div
    <div class="inner" @click="onInnerClick"> 子 div </div>
</div>
  • 【案例4】.once：绑定的事件只触发1次，点击div区域只能触发一次事件
<div class="inner" @click.once="onInnerClick"> 我是一个div </div>
  • 【案例5】.self：只有点击当前div才会触发自己的事件
//点击父和孙都不会触发子div事件，只有点击子div才可触发子div事件
<div class="outer" @click="onOuterClick">
	父div
    <div class="inner" @click.self="onInnerClick"> 
        子 div 
        <div class="box" @click="onBoxClick"> 我是孙子div </div>
    </div>
</div>

3.7、按键修饰符

  • 【作用】在监听键盘事件时，需要判断详细的按键，可以为键盘相关的事件添加按键修饰符。
  • 【案例1】@keyup:enter只有在key是Enter 时调用vm.submit()如下：
<input @keyup:enter="submit">
  • 【案例2】@keyup.esc只有在key是Esc 时调用vm.clearInput()如下：
<input @keyup.esc="clearInput">
<!--通过内置变量$event获取输入的值-->
methods:{
	clearInput(e){
	e.target.value = '';
	}
}

3.8、双向绑定指令

  • 【作用】vue提供v-model双向数据绑定指令，用来快速获取表单的数据
  • 【使用】可以使用v-model指令的标签有
    • input输入框
    • textarea
    • select
  • 【案例】
<div id="app">
        <p>用户名是：{{username}}</p>
        <input type="text" v-model="username"/>
        <p>选中的省份是：{{provinceName}}</p>
        <select v-model="province">
            <option value="">请选择</option>
            <option value="1">北京</option>
            <option value="2">克拉玛依</option>
            <option value="3">湖北</option>
        </select>
    </div>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                username:"douglas",
                province:2
            },
            motheds:{
            }
        })
    </script>
  • 【v-model专用修饰符】方便对用户输入的内容进行处理

在这里插入图片描述

3.9、条件渲染指令

  • 【作用】按需要控制DOM的显示与隐藏
  • v-if 每次动态创建或移除DOM元素，实现元素的显示和隐藏
    - v-else-if 必须配合v-if指令一起使用，否则将不会被识别。
    - v-else
  • v-show 动态为元素添加或移除display:none样式,来实现元素的显示和隐藏
  • 性能区别：v-if有更高的切换开销,而v-show有更高的初始渲染开销
    • 如果需要非常频繁地切换，则使用v-show较好
    • 如果在运行时条件很少改变，则使用v-if较好
  • 【案例】
<div id="app">
    <button @click="flag = !flag">控制显示/隐藏</button>
	<p v-if="flag === true">请求成功---v-if</p>
    <p v-show="flag === true">请求成功---v-show</p>
    <div v-if="type === 'A'">优秀</div>
    <div v-else-if="type === 'B'">良好</div>
    <div v-else-if="type === 'C'">一般</div>
    <div v-else>差</div>
</div>
<script src="./lib/vue.js"></script>
      <!-- 3.编写js脚本 创建vm实例对象 -->
      <script>
        const vm = new Vue({
          //3.1 指定当前 vm 实例要控制页面的那个区域
          el: '#app',
          //3.2 指定Model数据源
          data: {
              //控制显示与隐藏
            flag : true,
            type : 'A'
          }
        })
</script>

3.10、列表渲染指令

  • 【概念】vue提供了v-for指令，基于一个数组来循环渲染相似的UI结构
    • 需要使用item in items形式的特殊语法
      • items是待循环的数组
      • item是当前循环项
  • 【案例】
<!DOCTYPE html>
<html long="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viveport" content="width=device-width, initial-scale=1.0" />
    <title>douglas</title>
    <body>
      <div id="app">
       <ul>
          <li v-for="item in list">姓名：{{item.name}}</li>
       </ul>
      </div>
      <script src="./lib/vue.js"></script>
      <!-- 3.编写js脚本 创建vm实例对象 -->
      <script>
        const vm = new Vue({
          //3.1 指定当前 vm 实例要控制页面的那个区域
          el: '#app',
          //3.2 指定Model数据源
          data: {
            list: [
              {id:1,name: 'qwe'},
              {id:2,name: "asd"}
            ]
          }
        })
      </script>  
    </body>
  </head>
</html>

  • 【v-for中的索引】

    • v-for指令还支持一个可选的第二个参数，即当前项的索引。
    • 【语法】 （item,index）in items
    • 【案例】item项与index索引都是形参，可以根据需要进行重命名
    <ul>
    <li v-for="(item,index) in items">索引是：{{index}}，姓名是：{{item.name}}</li>
</ul>

  • 【循环列表key维护】

    • 当列表的数据变化时，默认情况下，vue会尽可能的复用已存在的DOM元素，从而提升渲染的性能。但是这种默认的性能优化策略，会导致有状态的列表无法被正确更新
    • 为了为vue一个提示，以便能确定每个节点的唯一性，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。因此需要为每项提供一个唯一的key属性

  • 【注意】只要用到了v-for指令，就必须绑定一个:key属性

    • 且尽量使用id作为key的值,且不能重复！！！（唯一性）
    • key的值类型必须是：字符串或数字类型
    • 建议使用数据项id属性的值作为key的值，具有唯一性；
    • 建议使用v-for指令时一定要指定key的值(既提升性能，又防止列表状态紊乱)
    <tr v-for="(item,index) in list" :key="item.id">
	<td>{{index}}</td>
	<td>{{item.id}}</td>
</tr>

四、Vue3.0过滤器

4.1、过滤器

  • 【概念】过滤器fiters 常用与文本的格式化
  • 【例如】hello -> Hello
  • 【使用地方】插值表达式和v-bind属性绑定
  • 【定义过滤器】在创建vue实例期间，可以在filter节点中定义过滤器
  • 【案例】过滤器应该被添加在JavaScript表达式的尾部，由"管道符"进行调用，如下：
<!DOCTYPE html>
<html long="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viveport" content="width=device-width, initial-scale=1.0" />
    <title>douglas</title>
    <body>
      <div id="app">
       <ul>
          <!-- v-bind 和 插值表达式 均可以使用过滤器 -->
          <li :title="info | capitalize">姓名：{{name | capitalize}}</li>
       </ul>
      </div>
      <script src="./lib/vue.js"></script>
      <script>
        const vm = new Vue({
          el: '#app',
          data: {
            name : 'dgc',
            info : 'name'
          },
          // 1.过滤器区域
          filters: {
            //2.定义过滤器
            capitalize(str) { 
              //3. 实现首字母转为大写的过滤器
              return str.charAt(0).toUpperCase() + str.slice(1)
            }
          }
        })
      </script>  
    </body>
  </head>
</html>

4.2、私有过滤器与全局过滤器

  • 【私有过滤器】在filters节点下定义的过滤器，因为它只能在当前vm实例所控制的el区域内使用

  • 【全局过滤器】可以在多个vue实例之间共享过滤器

    • 定义全局过滤器格式如下：需要定义在已有的vm的script之上
    <script>
        // 全局过滤器 - 独立于每个vm 实例之外
        // Vue.filter() 接受两个参数：
        // 第一个参数： 全局过滤器名字
        // 第二个参数： 全局过滤器的处理函数
        Vue.filter('capitalize', (str) => {
          return str.charAt(0).toUpperCase() + str.slice(1) + '~~'
        })
</script>

4.3、多个过滤器使用

  • 同时调用多个过滤器处理数据，如下：
      <div id="app">
       <ul>
          <!-- v-bind 和 插值表达式 均可以使用过滤器 -->
          <!-- 多个过滤器同时使用 -->
          <li :title="info | capitalize">姓名：{{name | capitalize | maxLength}}</li>
       </ul>
      </div>
      <script src="./lib/vue.js"></script>
      <script>
        // 全局过滤器 - 独立于每个vm 实例之外
        // Vue.filter() 接受两个参数：
        // 第一个参数： 全局过滤器名字
        // 第二个参数： 全局过滤器的处理函数
        Vue.filter('capitalize', (str) => {
          return str.charAt(0).toUpperCase() + str.slice(1) + '~~'
        })
        //全局过滤器 - 控制文本的最大长度
        Vue.filter('maxLength', (str) => {
          if(str.length <= 5) return str 
          return str.slice(0, 5) + '...'
        })
      </script>

4.4、过滤器传参

  • 过滤器的本质是JavaScript函数,因此可以接受参数

    • 格式如下：
    <!-- arg1 和 arg2 是传递给 filterA 的参数 -->
<p>
    {{ message | filterA(arg1, arg2)}}
</p>
//过滤器处理函数的形参列表中：
// 第一个参数： 永远是“管道符”前面待处理的值
// 第二个参数开始： 才是调用过滤器时传递过来的 arg1 和 arg2 参数
<script>
Vue.filter('filterA',(msg, arg1, arg2) => {
	//过滤器处理业务逻辑
})
</script>
    • 案例如下：
    <div id="app">
   <ul>
          <!-- v-bind 和 插值表达式 均可以使用过滤器 -->
    <li :title="info | capitalize">姓名：{{name | capitalize | maxLength(3)}}</li>
   </ul>
</div>
      <script src="./lib/vue.js"></script>
      <script>
        // 全局过滤器 - 独立于每个vm 实例之外
        // Vue.filter() 接受两个参数：
        // 第一个参数： 全局过滤器名字
        // 第二个参数： 全局过滤器的处理函数
        Vue.filter('capitalize', (str) => {
          return str.charAt(0).toUpperCase() + str.slice(1) + '~~'
        })
        //全局过滤器 - 控制文本的最大长度  len是用户传入的长度值，如果用户没有传入，默认值是5
        Vue.filter('maxLength', (str, len = 5) => {
          if(str.length <= len) return str 
          return str.slice(0, len) + '...'
        })
      </script>

  • 【Vue3.0注意】过滤器只有Vue2.0版本存在，3.0版本已经剔除了过滤器！！！！

五、品牌案例实现

5.1、整体实现步骤

  • 1.创建基本的Vue实例
  • 2.基于Vue渲染表格数据
  • 3.实现添加品牌功能
  • 4.实现删除品牌功能
  • 5.实现修改品牌状态功能

5.2、创建基本的Vue实例

  • 【步骤1】新建html页面，导入vue的js文件
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viveport" content="width=device-width, initial-scale=1.0" />
    <title>douglas</title>
    <body>
      <!-- 1.导入vue.js的script脚本文件 -->
      <script src="./lib/vue.js"></script>
    </body>
  </head>
</html>
  • 【步骤2】声明页面的el区域
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viveport" content="width=device-width, initial-scale=1.0" />
    <title>douglas</title>
    <body>
      <!-- 2.在页面中声明一个将要被vue所控制的el区域 -->
      <div id="app"></div>
      <!-- 1.导入vue.js的script脚本文件 -->
      <script src="./lib/vue.js"></script>
    </body>
  </head>
</html>
  • 【步骤3】创建vue的实例对象
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viveport" content="width=device-width, initial-scale=1.0" />
    <title>douglas</title>
    <body>
      <!-- 2.在页面中声明一个将要被vue所控制的el区域 -->
      <div id="app"></div>
      <!-- 1.导入vue.js的script脚本文件 -->
      <script src="./lib/vue.js"></script>
      <!-- 3.编写js脚本 创建vm实例对象 -->
      <script>
        const vm = new Vue({
          //3.1 指定当前 vm 实例要控制页面的那个区域
          el: '#app',
          //3.2 指定Model数据源
          data: {
            //品牌列表数据
            brandlist: [
              {id: 1, brandname: '宝马', state: true, addtime: new Date() },
              {id: 2, brandname: '奥迪', state: false, addtime: new Date() },
              {id: 3, brandname: '奔驰', state: true, addtime: new Date() },
              {id: 4, brandname: '野马', state: true, addtime: new Date() },
            ]
          }
        })
      </script>  
    </body>
  </head>
</html>

5.3、渲染表格数据

  • 【步骤1】使用v-for指令循环渲染表格的数据
<tbody>
	<tr v-for="(item, index) in brandlist" :key="item.id">
    	<td>{{index + 1}}</td>
        <td>{{ item.brandname }}</td>
        <td>{{ item.state }}</td>
        <td>{{ item.addtime }}</td>
        <td><a href="#">删除</a></td>
    </tr>
</tbody>
  • 【步骤2】将品牌的状态渲染为Switch开关效果
<td>
	<div class="custom-control custom-switch">
        <!-- 基于 checkbox 渲染出 switch 开关效果 -->
        <input type="checkbox" class="custom-control-input" :id="item.id" v-model="item.state"/>
        <!-- switch 开关后面的描述文本 -->
        <label class="custom-control-label" :for="item.id" v-if="item.state">已启用</label>
        <label class="custom-control-label" :for="item.id" v-else>已禁用</label>
    </div>
</td>
  • 【步骤3】使用全局过滤器对时间进行格式化
<!-- 调用全局过滤器 dateFormat -->
<td>{{item.addtime | dateFormat}}</td>
<script>
<!-- 过滤器 -->
Vue.filter('dateFormat', (dtStr) =>{
// 定义格式化时间
	const dt = new Date(dtStr)
	const y = dt.getFullYear()
	const m = padZero(dt.getMonth() + 1)
	const d = padZero(dt.getDate())
	const hh = padZero(dt.getHours())
	const mm = padZero(dt.getMinutes())
	const ss = padZero(dt.getSeconds())
	return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})
// 定义补零的函数
function padZero(n) { 
	return n>9 ? n : '0'+n
}
</script>

5.4、添加品牌

  • 【步骤1】阻止表单的默认提交行为(防止表单自动提交)
<form class="form-inline" @submit.prevent>
    <!-- 表单内部结构 -->
</form>
  • 【步骤2】为input输入框进行v-model双向数据绑定 （双向绑定品牌名称，且进行去除空格处理）
    • 注意：需要在data数据区域中声明brandname属性字段
<input type="text" class="form-control" placeholder="请输入品牌名称" v-model.trim="brandname"/>
  • 【步骤3】为"添加品牌"的button按钮绑定click时间处理函数
<button type="submit" class="btn btn-primary mb-2" @click="addNewBrand">
    添加品牌
</button>
  • 【步骤4】在data中声明nextId属性（用来记录下一个可用的id值），并在methods区域中声明addNewBrand事件处理函数
data:{
    nextId: 4 //下一个可用ID
},
methods: {
    //添加品牌的时间处理函数
    addNewBrand() {
        if(!this.brandname) return alert('品牌名称不能为空！')
        this.brandlist.push(
        	{
                id: this.nextId,
                brandname: this.brandname,
                state: true,
                addtime: new Date()
            }
        )
        //新增完后 原品牌名称清空，Id加一
        this.brandname = ''
        this.naxtId ++
    }
}
  • 【步骤5】快速清空输入框内的内容，监听input输入框keyup事件，通过.esc按键修饰符快速清空
<!-- 注意：如果事件处理函数的逻辑只是简单的赋值操作，可以简写到行内 -->
<input type="text" class="form-control" placeholder="请输入品牌名称" v-model.trim="brandname" @keyup.esc="brandname= ''"/>

5.5、删除品牌

  • 【步骤1】为删除的a链接绑定click点击事件处理函数，并阻止其默认行为
<td>
	<!-- 通过 .prevent 事件修饰符，阻止 a链接的默认跳转行为 -->
    <!-- 把 item.id 作为参数，传递给 removeBrand 函数 -->
    <a href="#" @click.prevent="removeBrand(item.id)">删除</a>
</td>
  • 【步骤2】通过对原数组进行过滤，再赋值给新数组达到删除的目的
// 删除品牌方法
removeBrand(id) {
   if(!id) return alert('品牌ID不能为空!')
   // 通过对原数组进行过滤，再赋值给新数组达到删除的目的
    this.brandlist = this.brandlist.filter( x => x.id !== id)
}

5.6、案例源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viveport" content="width=device-width, initial-scale=1.0" />
    <title>douglas</title>
    <!-- 导入 bootstrap 的样式表 -->
    <link rel="stylesheet" href="./lib/bootstrap.css"/>
    <style>
      /* 基本的样式内容 */
      :root {
        font-size: 13px;
      }
      body {
        padding: 8px;
      }
    </style>
    <body>
      <!-- 2.在页面中声明一个将要被vue所控制的el区域 -->
      <div id="app">
        <!-- 卡片区域 -->
        <div class="card">
          <h5 class="card-header">添加品牌</h5>
          <div class="card-body">
              <!-- 添加品牌的表单 -->
              <form class="form-inline" @submit.prevent>
                <div class="input-group mb-2 mr-sm-2">
                    <div class="input-group-prepend">
                        <div class="input-group-text">品牌名称</div>
                    </div>
                    <!-- 品牌名称文本输入框 -->
                    <input type="text" class="form-control" placeholder="请输入品牌名称" v-model.trim="brandname" @keyup.esc="brandname= ''"/>
                </div>
                <!-- 表单提交按钮 -->
                <button type="submit" class="btn btn-primary mb-2" @click="addNewBrand">添加品牌</button>
              </form>
          </div>
        </div>
        <!-- 品牌列表 -->
        <table class="table table-bordered table-striped mt-2">
            <!--表头  -->
          <thead>
              <tr>
                <th>序号</th>
                <th>品牌名称</th>
                <th>状态</th>
                <th>创建时间</th>
                <th>操作</th>
              </tr>
          </thead>
          <!-- 表格的主体区域 -->
          <tbody>
            <!-- 循环渲染每一项 -->
            <tr v-for="(item, index) in brandlist" :key="item.id">
                <td>{{index + 1}}</td>
                  <td>{{ item.brandname }}</td>
                  <td>
                    <div class="custom-control custom-switch">
                      <!-- 基于 checkbox 渲染出 switch 开关效果 -->
                      <input type="checkbox" class="custom-control-input" :id="item.id" v-model="item.state"/>
                      <!-- switch 开关后面的描述文本 -->
                      <label class="custom-control-label" :for="item.id" v-if="item.state">已启用</label>
                      <label class="custom-control-label" :for="item.id" v-else>已禁用</label>
                  </div>
                  </td>
                  <!-- 使用全局过滤器 dateFormat 格式化时间 -->
                  <td>{{item.addtime | dateFormat}}</td>
                  <td>
                    <!-- 通过 .prevent 事件修饰符，阻止 a链接的默认跳转行为 -->
                      <!-- 把 item.id 作为参数，传递给 removeBrand 函数 -->
                      <a href="#" @click.prevent="removeBrand(item.id)">删除</a>
                  </td>
              </tr>
          </tbody>
        </table>
      </div>
      <!-- 1.导入vue.js的script脚本文件 -->
      <script src="./lib/vue.js"></script>
      <!-- 3.编写js脚本 创建vm实例对象 -->
      <script>
        // <!-- 过滤器 -->
        Vue.filter('dateFormat', (dtStr) =>{
        // 定义格式化时间
        const dt = new Date(dtStr)
        const y = dt.getFullYear()
        const m = padZero(dt.getMonth() + 1)
        const d = padZero(dt.getDate())
        const hh = padZero(dt.getHours())
        const mm = padZero(dt.getMinutes())
        const ss = padZero(dt.getSeconds())
        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        })
        // 定义补零的函数
        function padZero(n) { 
        	return n>9 ? n : '0'+n
        }
		//vm实例
        const vm = new Vue({
          //3.1 指定当前 vm 实例要控制页面的那个区域
          el: '#app',
          //3.2 指定Model数据源
          data: {
            //品牌名称
            brandname: '',
            //品牌ID
            nextId: 5,
            //品牌列表数据
            brandlist: [
              {id: 1, brandname: '宝马', state: true, addtime: new Date() },
              {id: 2, brandname: '奥迪', state: false, addtime: new Date() },
              {id: 3, brandname: '奔驰', state: true, addtime: new Date() },
              {id: 4, brandname: '野马', state: true, addtime: new Date() },
            ]
          },
          //方法区
          methods: {
            //添加品牌的时间处理函数
            addNewBrand() {
              if(!this.brandname) return alert('品牌名称不能为空！')
              this.brandlist.push(
              	{
                      id: this.nextId,
                      brandname: this.brandname,
                      state: true,
                      addtime: new Date()
                  }
              )
              //新增完后 原品牌名称清空，Id加一
              this.brandname = ''
              this.nextId++
            },
            // 删除品牌方法
            removeBrand(id) {
              if(!id) return alert('品牌ID不能为空!')
              // 通过对原数组进行过滤，再赋值给新数组达到删除的目的
              this.brandlist = this.brandlist.filter( x => x.id !== id)
            }
          }
        })
      </script>  
    </body>
  </head>
</html>

5.7、案例效果

在这里插入图片描述

以梦为馬Douglas
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue3中过滤器的使用
weixin_51688981的博客
08-11 6843
当后端返回的某个字段是abc而前端需要将其渲染成ABC但你不能只直接用数组接收数据时直接改变字段值，万一其他渲染地方又需要用到小写，所以这时候就需要用到过滤器了。注意一下过滤器写的位置，它是写在data外面的，就这些了，有什么问题评论区告诉我，一定回复。现在公司开发越来越多的会用到vue3，今天给大家分享一下vue3中过滤器的使用。这是vue3中过滤器的使用，接下来补充一下vue2中过滤器的使用。这个数据是自己在前端模拟的数据，...
vue2.0-devtools谷歌浏览器调试工具和vue3.0-devtools谷歌浏览器调试工具
08-19
该资源包括vue2.0-devtools谷歌浏览器调试工具和vue3.0-devtools谷歌浏览器调试工具，具体安装方法参考我的博客https://blog.csdn.net/dxnn520/article/details/121088688，如还不会，可私信我。
Vue3 之 过滤器
热门推荐
xybhua的博客
02-07 1万+
不建议把过滤器功能做的很复杂，这违背了过滤器的设计初衷,比如：Vue.filter(‘format’, function (value, …params) {…过滤器函数总是接收表达式的值作为第一个参数，过滤器本质上是一个 JS 函数，自然可以接收多个参数。v-bind 表达式：v-bind:href=“变量 | 过滤器”双花括号：{{ 变量 | 过滤器 }}实例：为表达式的值添加前后缀的过滤器。首字母转换为大写字母的全局过滤器。过滤器本质上是一个函数，与。
Vue3中如何使用过滤器？
最新发布
有我更精彩的博客
04-25 1341
在Vue2中，我们可以使用Vue.filter()方法来定义全局过滤器，然后在模板中通过{{ value | filterName }}来使用过滤器。在上面的示例中，我们首先创建了一个Vue应用，并定义了一个data属性message，然后在methods中定义了一个自定义的过滤器函数customFilter来将文本转换为大写。总的来说，尽管Vue3中废弃了全局过滤器的概念，但是通过方法调用和柯里化函数的方式，我们依然可以实现各种各样的过滤器功能，使得Vue3中的过滤器应用更加灵活和强大。
vue3过滤器的改变、及新用法
gusensen的博客
06-29 988
vue3过滤器
Vue3.0之第二章——组件、过滤器、计算属性、方法、监听器、高级语法
DuanQingCI的博客
08-04 532
组件、过滤器、计算属性、方法、监听器、高级语法一、过滤器、计算属性、方法、监听器1. 计算属性2. 过滤器3. 方法4. 监听器5. 示例6. 总结Xmind二、组件1. 全局组件2. 局部组件3. 动态组件4. 组件的传值4.1 props接收传值4.2 父组件传多参到子组件，子组件接收4.3 Non-prop属性5. 组件传值——单向数据流6 组件通过事件通信7. 组件通过v-model通信8. slot插槽8.1 什么是插槽8.2 slot 与 props 的区别8.3 匿名插槽（单个插槽、默认插槽）
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
Vue3.0-devtools-6.0.0-beta-7-Crx4Chrome.rar
04-12
Vue3.0-devtools-6.0.0-beta-7-Crx4Chrome.rar是一个压缩包，其中包含Vue3.0的开发工具版本6.0.0的beta 7版本，这是一个专门为Chrome浏览器设计的CRX扩展文件。Vue.js是目前非常流行的一个前端JavaScript框架，而Vue...
vue3.0 vue-quill-editor.rar
09-19
总的来说，Vue3.0 + Vue-Quill-Editor的组合为开发者提供了强大的富文本编辑功能，结合Vue CLI 3的快速开发能力，可以高效地构建出具有图片上传和尺寸调整功能的文本编辑器应用。在实际操作中，需注意版本兼容性、...
vue-cli2.0转3.0之项目搭建的详细步骤
10-17
npm uninstall -g vue-cli ``` 接着，安装 Vue CLI 3.0。有两种方式，可以使用 npm 或者 yarn： ```bash npm install -g @vue/cli # 或者 yarn global add @vue/cli ``` 创建项目时，Vue CLI 3.0 提供了更为简洁的...
Vue3不支持Filters过滤器的问题
10-14
主要介绍了Vue3不支持Filters过滤器的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Vue3中代替filters过滤器三种方案
qq_44741577的博客
02-04 1387
/ 方法三 自定义指令过滤if (playCount > 9999) el.innerText = (playCount / 10000).toFixed(2) + "万";
在vue3中实现filters过滤器功能
前端打工人的博客
02-06 4122
中的过滤器，但是变相一下，可以在双括号表达式中使用方法，所以也是可以间接实现的，功能简单，请看下面实例代码。
Vue2 和 Vue3 过滤器的使用
Ljwen_的博客
10-18 1511
Vue2、Vue3 过滤器的使用
Vue 3.0 过滤器
2201_75866484的博客
03-19 756
虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是“只是 JavaScript”的假设，这不仅有学习成本，而且有实现成本。注意，这种方式只能用于方法中，不可以在计算属性中使用，因为后者只有在单个组件的上下文中定义时才有意义。如果在应用中全局注册了过滤器，那么在每个组件中用计算属性或方法调用来替换它可能就没那么方便了。在 3.x 中，过滤器已删除，不再支持。我们建议用计算属性或方法代替过滤器，而不是使用过滤器。从 Vue 3.0 开始，过滤器已删除，不再支持。
vue3如何设置全局过滤器、app.config.globalProperties如何使用配置
红烧咸咸鱼
07-28 1550
vue3如何全局注册过滤器 app.config.globalProperties如何配置使用
1. vue-sy-admin: 基于vue3+TypeScript的全局过滤器(filters) 封装及示例
weixin_42386379的博客
10-13 896
在vue3中使用全局filters已经不是必须，有很多种替代方案(直接定义函数即可)。如果项目中使用了插件完全可以将filters导出函数使其在全局自动引入/声明。当然在这里就不说插件的使用了。下面就详细说说如何实现题外话: 强烈推荐使用，该库由vue核心成员开发，封装了各种常用hooks，能够省很多不必要的开发时间，且其中的封装hooks思想也很值得学习参考。
vue2.0-vue3.0
09-23
Vue2.0和Vue3.0是Vue框架的两个主要版本。Vue2.0是目前使用最广泛的版本，而Vue3.0是在Vue2.0的基础上进行了一些重大改进和优化。Vue3.0引入了一些新的特性和改进，例如使用Proxy替代defineProperty来实现更好的响应...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

以梦为馬Douglas

您的鼓励是对我最大的支持

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

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

打赏作者

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

抵扣说明：

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

余额充值