vue.js:634 [Vue warn]: Failed to resolve directive: obgcolors (found in <Anonymous>)

定义了两个自定义局部指令v-color（设置文字颜色）和v-obgColors（设置背景色），结果v-color可以正常使用，v-obgColors却不行，一度以为自己少写了什么，原来是因为自定义局部指令中内部不能出现大写字母（第一个字母可以大写，如：Obgcolors，中间大写不行，如：obgColors）；所以你可以写成Obgcolors也可以写成obgcolors,但是不可以写成obgC..

hst_gogogo

3331人浏览 · 2019-07-02 17:06:01

hst_gogogo · 2019-07-02 17:06:01 发布

所以你可以写成Obgcolors也可以写成obgcolors,但是不可以写成obgColors（中间不要出现大写字母！！！）对应使用指令时也要改过来v-obgcolors

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<p v-color:red>红色文字</p>
			<p v-color:pink>粉色文字</p>
			<p v-color:lime>绿色文字</p>
			<div v-obgColors:pink></div>
		</div>
		
		<script src="../0701LessCouse/js/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#box',
				directives:{
					color:{
						inserted(el,obj){
							el.style.color = obj.arg;
						}
					},
					obgColors:{
						inserted(el,obj){
							console.log(el,obj);
							if(obj.arg){
								el.style.background = obj.arg;
							}else{								
								el.style.background = obj.value;
							}
						}
					}
					
				}

			})
		</script>
	</body>
</html>

修改后代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<p v-color:red>红色文字</p>
			<p v-color:pink>粉色文字</p>
			<p v-color:lime>绿色文字</p>
			<div v-Obgcolors:pink></div>
		</div>
		
		<script src="../0701LessCouse/js/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#box',
				directives:{
					color:{
						inserted(el,obj){
							el.style.color = obj.arg;
						}
					},
					Obgcolors:{
						inserted(el,obj){
							console.log(el,obj);
							if(obj.arg){
								el.style.background = obj.arg;
							}else{								
								el.style.background = obj.value;
							}
						}
					}
					
				}

			})
		</script>
	</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^