Vue学习笔记

最新推荐文章于 2024-05-30 13:09:09 发布

wyqgg123

最新推荐文章于 2024-05-30 13:09:09 发布

阅读量110

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/wyqgg123/article/details/119383208

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

vue过滤器filters

定义过滤器

var app = new Vue({
    el: '#app',
    data:{msg:'UP'},
    //定义过滤器
    filters:{
        // 过滤器的名称及方法
        myFilters:function(val){
            //转化为小写
            return val.toLowerCase();
        }
    }
})

过滤器的使用：

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化转义等操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器要被添加到操作值得后面，使用管道符 | 分割；vue会自动将操作值，以实参的形式传入过滤器的方法中；

自定义指令

v-on 、v-model、v-show 等指令，在操作 dom 时使用了 ref 属性，其实这些指令也是操作dom 的一种方式，但有时，这些指令并不能满足我们的需求，因此 vue 允许我们自定义指令来操作 dom

<div id="app">
    <p v-setcolor>自定义指令的使用</p>
</div>
<script>
    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('setcolor', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
            // 聚焦元素
            el.style.color = 'red';
        }
    })
    var app = new Vue({
        el: '#app',
    })
</script>

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div">
            <!--绑定点击事件 -->
			<button @click="click">点击</button>
             <!-- 这里就是过滤器的使用 -->
			<p ref="pv">{{msg|myFilters|replace}}</p>
            <!--私有自定义指令-->
			<p v-blue = "color">局部自定义指令使用</p>
            <!--全局自定义指令-->
			<p v-setcolor>全局自定义指令使用</p>
		</div>
	</body>
</html>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    //全局自定义指令
	Vue.directive('setcolor',{
		inserted: function(el){
			//设置color的值为red
			el.style.color = "red";
		}
	})
	
	var app = new Vue({
		el:'#div',
		data:{
			msg:"WyQgkJs猪猪是猪谁？",
			color:'green',
		},
		methods:{
			click:function(){
                 //获取Dom元素的innerHTML的值
				var t = this.$refs.pv.innerHTML;
                 //控制台输出
				console.log(t);
			}
		},
		filters:{
			myFilters:function(val){
                 //大写字母转化小写字母
				return val.toLowerCase();
			},
			replace:function(val){
                //过滤敏感词
			   return val.replace(/猪/g,'*');	
			}
		},
        //私有自定义指令
        directives:{
			blue:{
				inserted:function(el,val){
					//val.value的值为data中定义的color的值
					el.style.color = val.value;
				}
			}
		},
	})
</script>

效果展示：
在这里插入图片描述

wyqgg123

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记

vue过滤器filters定义过滤器var app = new Vue({ el: '#app', data:{msg:'UP'}, //定义过滤器 filters:{ // 过滤器的名称及方法 myFilters:function(val){ //转化为小写 return val.toLowerCase(); } }})过滤器的使用：Vue.js 允许你自定义
复制链接

扫一扫

专栏目录