正文
[记录] Vue中的dom操作
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
使用过Vue的同学都应该有这样一个感觉，在vue中页面是基于数据驱动的，不需要我们自己操作dom，框架帮我们完成了这一步，事实上Vue官方也建议我们这样做
在绝大多数情况下是不需要操作dom就可以完成效果的，但是在极少数情况下需要我们操作dom，例如以下情况
我有如下一个表单，但用户点击提交时，校验表单各字段是否为空，如果为空，则让该字段输入框背景色为红色，同时获得焦点
如果使用jquery，我们可以给每个输入框一个id值，然后判断字段值为空时根据id获取元素，然后设置背景色等
这样做的话意味着需要给每一个元素一个id，同时需要逐个判断，如果字段值多的情况下需要写很多if分支
并且因为要让文本框获得焦点，我们就必须要拿到该文本框，然后调用focus方法
所以问题的难点还是在于如何拿到该元素
Vue指令（directive）给我们提供了另一种解决方案
<form action="#">
<label for="name">
Your Name : <br>
<input type="text" name="name" v-model="person.name.val" v-my-directive="person.name">
</label>
<br>
<label for="email">
Your Email : <br>
<input type="email" name="email" v-model="person.email.val" v-my-directive="person.email">
</label>
<br>
<label for="address">
Your Address : <br>
<textarea name="address" id="address" cols="40" rows="5" v-model="person.address.val" v-my-directive="person.address"></textarea>
</label>
<br>
<button @click.prevent="submit">提交</button>
</form>
//全局注册
Vue.directive('my-directive', function (el, binding) {
//获取指令的绑定值
var obj = binding.value;
if (obj != null) {
//将改元素绑定到该对象的 el 属性上
Vue.set(obj, key, 'el');
}
}); var app = new Vue({
el: '#app',
data: {
person : {
name : { val : ''},
address : { val : ''},
email: { val : ''}
}
},
methods: {
submit: function() {
for(var obj in this.person){
if(this.person[obj].val == ''){
this.person[obj].el.focus()
this.person[obj].el.style.backgroundColor="pink"
return
}
}
}
}
})
