Vue2.x版本filter[过滤器]使用案例

最新推荐文章于 2024-05-22 18:42:01 发布

红豌豆

最新推荐文章于 2024-05-22 18:42:01 发布

阅读量1.3k

点赞数

分类专栏： Vue2.X vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_64353584/article/details/124545925

版权

本文介绍了Vue2.x版本的过滤器使用，包括商品列表实例、正则表达式应用和多参数过滤器的定义。Vue.js是一个专注于视图层的渐进式框架，通过自底向上增量开发的设计，简化用户界面构建。文章详细解析了过滤器的三种用法，并邀请读者提供反馈和建议。

摘要由CSDN通过智能技术生成

Vue是流行的前端框架， Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。

过滤器的定义语法

Vue.filter(‘过滤器的名称’, function(){})

  // 过滤器中的 function ，第一个参数，已经被规定死了，永远都是 过滤器 管道符前面 传递过来的数据
   Vue.filter('过滤器的名称', function (data) {
    return data + '123'
  })

实例商品列表___本实例采用vue2.4的版本

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script src="./lib/vue-2.4.0.js"></script>
	<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
	<div id="app">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">添加品牌</h3>
			</div>
			<div class="panel-body form-inline">
				<label>Id:<input type="text" class="forn-control" v-model='id'></label>
				<label>Name:<input type="text" class="forn-control" v-model='name'></label>
				<input type="button" class="btn btn-primary" value="添加" @click="add()">
				<label>搜索关键字:<input type