[记录] 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
}
}
}
}
})
[记录] Vue中的dom操作的更多相关文章
- Vue中的DOM操作
1.在要获取的标签中添加 ref="xx" 示例: <button ref="btn">一个按钮</button> 2.在 mounte ...
- 第七十六篇:ref引用(在vue中引用Dom的方法)
好家伙, 引子: jQuery简化了程序员操作DOM的过程 vue 优势:MVVM 在vue中,程序员不需要操作DOM.程序员只需要把数据维护好即可!(数据驱动视图) 那么若要在vue中操作dom,这 ...
- 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】
一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- jQuery中的DOM操作<思维导图>
DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...
- Jquery:jquery中的DOM操作<一>
之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...
- jQuery中的DOM操作总结
jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...
- jQuery中的DOM操作《思维导图》
首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...
- 第三章(jQuery中的DOM操作)
3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute( ...
随机推荐
- (转)volatile 的理解
对于(volatile unsigned char *)0x20我们再分析一下,它是由两部分组成: 1) (unsigned char *)0x20,0x20只是个值,前面加(unsigned cha ...
- Mac OS X L2TP Client Setup
原文链接:http://www.softether.org/4-docs/2-howto/9.L2TPIPsec_Setup_Guide_for_SoftEther_VPN_Server/5.Mac_ ...
- 拖放事件(drop events)在Firefox上运行会出现的问题
可能会有人觉得我废话特别多,我就在开头写一个简单粗暴的版本: 在Firefox中ondrop事件会触发Firefox自带的拖拽搜索功能,在ondrop事件触发执行时触发的函数中加上这两条: /* 禁止 ...
- Java中的锁分类与使用
1. Java锁的种类 在笔者面试过程时,经常会被问到各种各样的锁,如乐观锁.读写锁等等,非常繁多,在此做一个总结.介绍的内容如下: 乐观锁/悲观锁 独享锁/共享锁 互斥锁/读写锁 可重入锁 公平锁/ ...
- 嵌入式GCC笔记
GNU C Complier 查看 gcc 版本 :gcc -v 文件后缀名 .c的后缀 为C语言的文件源码 gcc -o output gcc -o 输出文件名字 输入文件名 gcc -v -o ...
- py-day3-6 python map函数
map函数 :处理序列中的每个元素,得到的结果是一个列表,该列表元素个数及位置与原来一样 ## 求列表里元素的平方 (原始方法) num_1=[1,2,13,5,8,9] res =[] for i ...
- DDS生成正弦波
DDS生成正弦波 `timescale 1ns / 1ps ////////////////////////////////////////////////////////////////////// ...
- Gradle的使用及下载
1在官网下载Gradle 基本学这个的都有JDK和JVM所以只需要在环境变量中配置即可 点击hettp://start.spring.io/即可使用
- Python3.4 枚举类型的使用
From: https://majing.io/posts/10000005131196 枚举类型是在Python3.4新增到Python的标准库. 创建枚举 Python提供了两种方法来创建枚举: ...
- 【sql】ALTER更新数据库字段
--数据库表字段更新sql脚本,以下是示例 --新增列字段 --alter table table_name add column `address` varchar() COLLATE utf8_b ...