VUE的指令和过滤器

最新推荐文章于 2024-10-16 18:35:07 发布
最新推荐文章于 2024-10-16 18:35:07 发布
阅读量250 收藏
点赞数
分类专栏： VUE 前端 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38848781/article/details/127977481
版权

VUE的指令和过滤器小Dome

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 导入vue脚本 -->
		<script src="./lib/vue-2.6.12.js"></script>
		<title>指令 and 过滤器</title>
	</head>
	<body>

		<div style="margin: 5px;display:inline-block;background-color: burlywood;" title="内容渲染指令">
			<!-- 内容渲染指令 -->
			<div id="app1">
				<!-- {{}} 插值式，不会覆盖原值 -->
				<p>{{v_str}}</p>
				<!-- v-text 会覆盖原值 -->
				<p v-text="v_str">被覆盖的文本</p>
				<!-- v-html用于渲染html标签 -->
				<p v-html="v_span">被覆盖的文本</p>
				<p>{{v_str+'和 Javascript 表达式的运算'}}</p>
				<p>1+1={{1+1}}</p>
			</div>
			<script>
				//创建vue实例对象
				const vm1 = new Vue({
			
					//获取控制元素
					//如果选择获取标签名（如p、div……）则只会获取找到的第一个元素
					//el: 'p',
					el: '#app1',
			
					//制定model数据源
					data: {
						// 内容渲染指令
						v_index: 3,
						v_str: '测试文本（内容渲染指令）1',
						v_span: '<span style="color:red;font-size:16px;">测试标签（内容渲染指令）2</span>'
			
					}
				})
			</script>
		</div>
	
		<div style="margin: 5px;display:inline-block;background-color: burlywood;" title="属性绑定指令">
			<!-- 属性绑定指令 -->
			<div id="app2">
				<input type="text" v-bind:placeholder="inputDefValue1" />
				<br />
				<input type="text" :placeholder="inputDefValue2" />
				<br />
				<div :title="'divTitle'+index">动态绑定，鼠标指向我</div>
			</div>
			<script>
				new Vue({
					el: '#app2',
					data: {
						index: '1',
						inputDefValue1: '（属性绑定指令）',
						inputDefValue2: '（属性绑定指令，第二种写法）'
					}
				})
			</script>
		</div>

		<div style="margin: 5px;display:inline-block;background-color: burlywood;" title="事件绑定指令">
			<!-- 事件绑定指令 -->
			<div id="app3">
				<button v-on:click="count_001++">{{str_01}}{{count_001}}</button>
				<br />
				<button v-on:click="on_click_01">{{str_01}}{{count_01}}</button>
				<br />
				<button @click="on_click_02(2)">{{str_02}}{{count_02}}</button>
				<br />
				<!-- 当参数列表有其他参数时，需要用显示$event -->
				<button @click="on_click_03(1.5,$event)">{{str_03}}{{count_03}}</button>
				<br />
				<!--事件修饰符
				.prevent 阻止默认行为（例如：阻止 a 连接的跳转、阻止表单的提交等）
				.stop    阻止事件冒泡(事件冒泡：当父子元素都有click事件时，点击子元素也会触发父元素的click事件)
				.capture 以捕获模式触发当前的事件处理函数
				.once    绑定的事件只触发1次
				.self    只有在 event.target 是当前元素自身时触发事件处理函数 -->
				<a href="www.baidu.com" title="阻止默认行为（例如：阻止 a 连接的跳转、阻止表单的提交等）"
					@click.prevent="on_click_04">www.baidu.com</a>
				<br />
				<div style="width: 200px;background-color: chocolate;height: 50px;" title="未使用.stop,会引起事件冒泡"
					@click="on_click_04">
					<button @click="count_04++">{{str_03}}{{count_04}}</button>
				</div>
				<br />
				<div style="width: 200px;background-color: chocolate;height: 50px;" title="使用.stop,不会引起事件冒泡"
					@click="on_click_04">
					<button @click.stop="count_05++">{{str_03}}{{count_05}}</button>
				</div>

				<!-- 加按键修饰符 -->
				<!-- @keyup.enter 回车按键按下 -->
				<!-- {
					"enter" : "回车键",
					"esc"   : "esc键"，
					"space" : "空格"
					"a,b,……": "字母键等"
					""      : "后边不加东西，单一个@keyup，则相应所有按键"
				} -->
				<input type="text" @keyup.esc="keyupEsc" @keyup.enter="keyupEnter">


			</div>
			<script>
				new Vue({
					el: '#app3',
					data: {
						count_001: 0,
						count_01: 0,
						count_02: 0,
						count_03: 0,
						count_04: 0,
						count_05: 0,
						str_01: '点击次数：',
						str_02: '点击次数X2：',
						str_03: '点击切换本按钮颜色',
					},
					methods: {
						on_click_01() {
							this.count_01 += 1;
						},
						//接收事件参数对象event，简写为e
						on_click_02(num) {
							this.count_02 += num;
						},
						on_click_03(num, e) {
							this.count_03 += num;
							e.target.style.backgroundColor = e.target.style.backgroundColor === 'red' ? 'green' : 'red';
						},
						on_click_04(e) {
							e.target.style.backgroundColor = e.target.style.backgroundColor === 'red' ? 'green' : 'red';
						},
						keyupEsc() {
							console.log('keyupEsc');
						},
						keyupEnter(e) {
							e.target.style.backgroundColor = e.target.style.backgroundColor === 'red' ? 'green' : 'red';
							console.log('keyupEnter');
						}
					}
				})
			</script>
		</div>

		<div style="margin: 5px;display:inline-block;background-color: burlywood;" title="双向绑定指令">
			<!-- 双向绑定指令 -->
			<div id="app4">
				<p>input中的值：{{str_01}}</p>
				<!-- v-model指令修饰符(可叠加)
				.number 自动将用户的输入值转为数值类型 
				.trim 自动过滤用户输入的首尾空白字符 
				.lazy 在“change”时而非“input”时更新 -->
				<input type="text" v-model.lazy.trim.number="str_01">

				<p>select中的值：{{city}}</p>

				<select v-model="city">
					<option value="">请选择城市</option>
					<option value="北京">北京</option>
					<option value="上海">上海</option>
					<option value="广州">广州</option>
				</select>

			</div>
			<script>
				new Vue({
					el: '#app4',
					data: {
						str_01: "绑定元素内容",
						city: ""
					}
				})
			</script>
		</div>

		<div style="margin: 5px;display:inline-block;background-color: burlywood;" title="条件渲染指令">
			<!-- 条件渲染指令 -->
			<div id="app5">
				
				<!-- v-show 指令会动态为元素添加或移除 style="display: none;" 样式，从而控制元素的显示与隐藏 -->
				<p v-show="isShow">显示本文本</p>
				
				<!-- v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏                  -->
				<p v-if="cityFlag==1"     >北京</p>
				<p v-else-if="cityFlag==2">上海</p>
				<p v-else-if="cityFlag==3">广州</p>
				<p v-else                 >杭州</p>
			</div>
			<script>
				new Vue({
					el: '#app5',
					data: {
						isShow   : true,
						cityFlag : 2
					}
				})
			</script>
		</div>

		<div style="margin: 5px;display:inline-block;background-color: burlywood;" title="列表渲染指令">
			<!-- 列表渲染指令 -->
			<div id="app6">
				
				
				<!-- 添加用户的区域 -->
				    <div>
				      <input type="text" v-model="id" placeholder="请输入id">
					  <input type="text" v-model="name" placeholder="请输入name">
				      <button @click="addNew">添加</button>
				    </div>
				
				<table>
				    <thead>
						<th>索引</th>
						<th>Id</th>
				        <th>姓名</th>
				    </thead>
				    <tbody>
				        <tr v-for="(item, index) in list_01" :key="item.id" >
							<td><input type="checkbox" v-model="item.status" /></td>
							<td>{{ index+1 }}</td>
							<td>{{ item.id }}</td>
							<td>{{ item.name }}</td>
				        </tr>
				    </tbody>
				</table>
			</div>
			<script>
				new Vue({
					el: '#app6',
					data: {
						id: '',
						name: '',
						list_01: [
							{id:'1',name:'aa',status:true },
							{id:'2',name:'bb',status:true },
							{id:'3',name:'cc',status:false }
						]
					},
					methods: {
					    // 点击了添加按钮
					    addNew() {
					      this.list_01.unshift({ id: this.id, name: this.name,status: false });
					      this.name = '';
					      this.id = '';
					    }
					}
				})
			</script>
		</div>

		<div style="margin: 5px;display:inline-block;background-color: burlywood;" title="过滤器">
			<!-- 过滤器 -->
			<div id="app7">
				
				<!-- 多过滤器调用顺序：从左向右 -->
				<p>{{ str_01 | filter_01 | filter_ALL_01(5) }}</p>
				
				<input type="text" :placeholder="str_01 | filter_01" />
				
			</div>
			<script>
				//全局过滤器（len默认值6，默认值可选）要声明在前面
				Vue.filter('filter_ALL_01', (str,len=6) => {
					//第二个字母大写
					return str.slice(0,len);
				});
			</script>
			<script>
				new Vue({
					el: '#app7',
					data: {
						str_01:'abcdefg'
					},
					// filters节点用于定义过滤器,Vue2支持，Vue3不支持
					filters:{
						//私有过滤器
						filter_01(str){//首字母大写
							return str.charAt(0).toUpperCase() + str .slice(1);
						}
					}
				});
			</script>
		</div>
		

	</body>
</html>
qq_38848781
关注
专栏目录
vue 的指令与过滤器
酷爱前端的小陈博客
04-15 3450
1. 指令的概念 指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。 vue 中的指令按照不同的用途可以分为如下 6 大类： ① 内容渲染指令 ② 属性绑定指令 ③ 事件绑定指令 ④ 双向绑定指令 ⑤ 条件渲染指令 ⑥ 列表渲染指令 注意：指令是vue 开发中最基础、最常用、最简单的知识点。 1.1 内容渲染指令 内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个： 1、v-text...
Vue中过滤器和自定义指令详解
m0_71345904的博客
08-11 461
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。双花括号插值和v-bind表达式(后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：。需要用到关键配置项filters在全局中格式化文件，全局组件都可以公用，是一种传递参数，串联的回调。自定义指令，顾名思义，就是我们使用者自己创建指令，如同vue给我们内置好的指令如v-model,v-on,v-band一样。我们自定义创建，然后去操作DOM元素。},//元素插入页面的时候},...
直播软件源码，vue 自定义指令过滤特殊字符
云豹网络科技
02-28 147
以上就是直播软件源码，vue 自定义指令过滤特殊字符， 更多内容欢迎关注之后的文章。直播软件源码，vue 自定义指令过滤特殊字符。
vue 正则表达式
qq_40055200的博客
11-18 4652
vue 校验 匹配非法字符： /[@#\$%\^&\*\s+]+/g 关键字中含有特殊字符：/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g \s表示空白字符。包括，空格，制表符等 ""只表示空格 \s+可匹配至少一个空白字符 [ ]+...
2. Vue指令和过滤器
Mr_LiuP的博客
03-04 1015
Vue指令与过滤器
指令和过滤器的区别及用法
一个有节操的码农
10-21 371
vue指令和过滤器的区别及用法
Vue的过滤器和自定义指令
热门推荐
暗武逢天的博客
07-07 2万+
Vue过滤器
框架技术--- Vue指令和过滤器
a23452的博客
03-10 1376
Vue框架 内容管理Vue简介vue特性--- 数据驱动视图，双向数据绑定MVVMVue3和Vue2的对比Vue的基本使用Vue的调试工具，vue-devtoolsVue内容渲染指令v-text 覆盖{{}}语法 插值表达式--Mustache 不覆盖v-html 内部为html标签字符串Vue属性绑定指令v-bind 绑定元素的属性 v-bind: attr = 'xx'事件绑定指令v-on绑定事件绑定事件并传参$event -- 表示事件对象事件修饰符 .prevent .stop .cpat
vue2的指令和过滤器
Jarvan_I的博客
09-26 412
vue2 内部会检查指令的定义，并在相应的生命周期钩子中调用指令的钩子函数。：vue2 内部会在处理模板时识别过滤器，并在双花括号插值表达式中调用过滤器函数。过滤器函数接收一个参数，即原始数据，并返回格式化后的数据。vue2 允许开发者创建自定义指令和过滤器，这些自定义元素可以扩展 Vue 框架的功能。通过自定义指令和过滤器，vue2 提供了强大的扩展能力，允许开发者根据需求定制框架的行为和功能。该函数接受两个参数：指令的名称和指令的定义对象。这些钩子函数会在指令的生命周期中特定的时候被调用。
Vue过滤器和内置指令
qq_52619560的博客
07-25 258
通用指令: v-bind:单向绑定解析表达式,可简写为 :xxx v-model:双向数据绑定 v-for:遍历数组/对象/字符串 v-on:绑定事件监听,可简写为@ v-if:条件渲染(动态控制节点是否存在) v-else:条件渲染(动态控制节点是否存在) v-show:条件渲染(动态控制节点是否展示)...
vue 指令和过滤器的基本使用(品牌管理案例)
10-16
私有过滤器和私有指令是Vue实例内部的方法，它们只能在当前Vue实例的作用域内使用，而不会影响到其他Vue实例或全局作用域。在文中，我们看到了私有过滤器dateFormat的定义，它根据传入的日期字符串返回特定格式的...
Vue的全局过滤器和私有过滤器的实现
10-15
在上面的示例中，我们可以看到如何定义全局过滤器和私有过滤器，并在Vue实例的模板中调用它们。全局过滤器msgFormat可以被任何Vue实例使用，而dateFormat过滤器只能在vm2这个Vue实例中使用。 在实际开发中，全局...
jeecg3版本的vue，离线启动
最新发布
sharesb的博客
10-16 277
jeecg的vue2版本已经停止维护，所以只能用vue3的版本。3版本中使用的是pnpm（npm的增强版本）下载依赖。使用pnpm安装的node_modules，不能直接复制到离线主机中（因为在 pnpm安装过程中，会给依赖的配置文件写死绝对路径，并且会在c盘生成缓存）。所以要在离线主机中启动，需要1.在联网机器上下载依赖保存到某个文件夹2.在离线主机中安装node，并配置环境变量3.在离线主机中，让npm加载第一步下载的依赖4.在离线主机中，npm正常安装。
vue3 Invalid value type passed to callWithAsyncErrorHandling()
w710537643的博客
10-11 403
vue3 提示警告。页面内点击按钮无响应。和 事件方法名 重名导致。
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 568
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
【vue】指令补充+样式绑定+计算属性+侦听器
zxj20041003的博客
10-13 870
所谓指令修饰符就是让指令的 功能更强⼤，书写更便捷如何监听回⻋键？​ 答: 1、 @keydown.enter -> 回⻋按下​ 2、@keyup.enter -> 回⻋抬起如何阻⽌默认⾏为、阻⽌冒泡？​ 答: 1、@click.prevent -> 阻⽌默认⾏为​ 2、@click.stop -> 阻⽌冒泡​ 3、 @click.prevent.stop -> 可以链式调⽤, ⼆者都阻⽌v-model的3个修饰符的作⽤是什么？
Vue3 中使用 toRefs的方法
qq_58341172的博客
10-12 338
当我们使用，reactive定义响应式对象的时候，使用let{name,age} = person 解析对象后，其name,age并不是响应式的，因此我们需要使用，toRefs属性，将其转化为响应式的。并且，使用toRefs转化后的name,age其变成了，
Vue CLI 创建项目
itmacy的博客
10-11 359
在执行 vue create 命令后，Vue CLI 将会启动一个交互式界面，让你选择一些选项，比如预设（默认设置、手动选择特性等）、选择特性（如 Babel、TypeScript、Router、Vuex 等）以及配置各种插件等。Vue CLI 是 Vue.js 开发的标准工具，它提供了一个用户界面，可以用来创建和管理 Vue.js 项目。选择完毕后，Vue CLI 将会自动生成项目的基础结构，并安装所需的依赖。首先，确保你已经安装了 Node.js 和 npm。
Uncaught (in promise) TypeError: Cannot convert object to primitive value
lotpyve的博客
10-15 1500
说一下我这里这个错误和警告的原因，是因为我把传给 第三方组件的值 也当做了 第三方组件的 ref，可能没太说清楚，所以接下来看代码，我这里使用的第三方组件是 vxe-table。使用vue3的时候报了这个错误，而且还同时报了一个警告。
Vue内置过滤器与自定义过滤器详解
Vue的过滤器系统为数据处理提供了极大的灵活性，无论是内置过滤器还是自定义过滤器，都可以帮助开发者更好地控制和格式化视图中的数据。通过理解和熟练运用这些过滤器，可以提高代码的可读性和维护性，同时提升用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值