Vue v-bind修饰符.prop property 与 attribute 的差别

声明:前面没有带入Vue描述,Vue在后面带入

在浏览器解析 DOM 树渲染页面后,每个标签都会生成一个对应的 DOM 节点。节点是一个对象,所以会包含一些 properties,attributes 也是其中一个property
–在一个国外论坛上找到的,希望能够方便理解– HTML attribute vs. DOM property   HTML 属性与 DOM 属性 The HTML attribute value specifies the initial value; the DOM value property is the current value.  HTML 属性值指定初始值; DOM 属性值是当前值

区别

说明 attributes property 访问方式 document.getElementById(‘id’).attributes.* document.getElementById(‘id’).* 可访问的属性 包含标签里定义的所有属性 只包含 HTML 标准的属性,不包含自定义属性

.prop

使用 v-bind前:

--html--
<input  id="b" value="aaa" dd="www" >	<!--value在input中并非自定义属性-->
<组件	id="c"	value="ccc" ></组件>	<!--value是 自定义属性-->
--控制台--
document.getElementById("b").attributes.value		=> 	value="aaa"
document.getElementById("b").value					=>	"aaa"

document.getElementById("b").attributes.dd			=>	dd=​"www"
document.getElementById("b").dd						=>	undefined

document.getElementById("c").attributes.value		=>	value="ccc"
document.getElementById("c").value					=>	undefined

//此时在 input中删除"aaa",输入"abc"

document.getElementById("b").attributes.value		=> 	value="aaa"
document.getElementById("b").value					=>	"abc"

使用 v-bind后: 算了,不描述多余话了,我相信已经你学过了 总而言之都是一个意思

默认 自定义属性不会出现在property中,可以通过.prop添加到property,不过原来的attributes会被删除 记住!HTML标准的属性存在property和attributes之中,若加上了v-bind后attributes会被删除,也就是加上v-bind的HTML标准的属性,是默认带有.prop的,在加上.prop并不会改变什么

我刚刚不是在学 吗! 我为什么要花大量时间看这个!好像没啥用啊!(っ °Д °;)っ

经验分享 程序员 微信小程序 职场和发展