当前位置：首页 > article >正文

Vue基础（3）

article 2025/1/12 15:50:28

过滤器

定义

对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）

语法

注册：Vue.filter(name,callback) 或 new Vue{filters:{}}
使用：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"

备注

过滤器也可以接收额外参数、多个过滤器也可以串联
并没有改变原本的数据, 是产生新的对应的数据

示例

这里提前引入了BootCDN下载的day.js。

<div id="root">
			<h2>显示格式化后的时间</h2>
			<!-- 计算属性实现 -->
			<h3>现在是：{{fmtTime}}</h3>
			<!-- methods实现 -->
			<h3>现在是：{{getFmtTime()}}</h3>
			<!-- 过滤器实现 -->
			<h3>现在是：{{time | timeFormater}}</h3>
			<!-- 过滤器实现（传参） -->
			<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
			<h3 :x="msg | mySlice">尚硅谷</h3>
		</div>

		<div id="root2">
			<h2>{{msg | mySlice}}</h2>
		</div>

	<script type="text/javascript">
		Vue.config.productionTip = false
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})
		
		new Vue({
			el:'#root',
			data:{
				time:1621561377603, //时间戳
				msg:'你好，尚硅谷'
			},
			computed: {
				fmtTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			methods: {
				getFmtTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			//局部过滤器
			filters:{
				timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
					// console.log('@',value)
					return dayjs(value).format(str)
				}
			}
		})

		new Vue({
			el:'#root2',
			data:{
				msg:'hello,atguigu!'
			}
		})
	</script>

效果：

内置指令

v-text

作用

向其所在的节点中渲染文本内容。

与插值语法的区别

v-text会替换掉节点中的内容，{{xx}}则不会。

示例

		<div id="root">
			<div>你好，{{name}}</div>
			<div v-text="name"></div>
			<div v-text="str"></div>
		</div>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				str:'<h3>你好啊！</h3>'
			}
		})
	</script>

效果

可以看到v-text是不能识别html结构的，会将内容原样搬到页面上

v-html

作用

向指定节点中渲染包含html结构的内容。

与插值语法的区别

v-text会替换掉节点中的内容，{{xx}}则不会。
v-html可以识别html结构。

使用v-html要注意安全性问题

在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
一定要在可信的内容上使用v-html，永不要用在用户提交的内容上

实例

		<div id="root">
			<div>你好，{{name}}</div>
			<div v-html="str"></div>
		</div>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				str:'<h3>你好啊！</h3>',
			}
		})
	</script>

效果

v-cloak(没有值)

本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak

使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

<style>
			[v-cloak]{
				display:none;
			}
		</style>
		<!-- 引入Vue -->
	</head>
	<body>
		<div id="root">
			<h2 v-cloak>{{name}}</h2>
		</div>
		<script type="text/javascript" src="xxxxxx"></script>
	</body>
	
	<script type="text/javascript">
		console.log(1)
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			}
		})
	</script>

如果中间引入了一个其他资源，因为网速或者服务器问题一直没有被返回，导致后面的vue一直被卡着，没有被解析，html中就会出现{{xxx}}，这时使用v-cloak配合css，可以暂时将起隐藏，vue实例创建完毕后会自动去除该属性。

v-once

v-once所在节点在初次动态渲染后，就视为静态内容了。
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

实例

		<div id="root">
			<h2 v-once>初始化的n值是:{{n}}</h2>
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
		</div>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				n:1
			}
		})
	</script>

后续只有第二个h2会变化，第一个h2将始终显示初始值

v-pre

跳过其所在节点的编译过程，可利用它跳过没有使用指令语法、没有使用插值语法的节点，会加快编译

<div id="root">
			<h2 v-pre>Vue其实很简单</h2>
			<h2 >当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
		</div>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				n:1
			}
		})
	</script>

查看全文

http://www.kler.cn/a/353553.html