关于vue.js:Attribute-property在vue中应用

概念

Attribute是元素标签的属性;property是元素对象的属性。
<input id=”a” value=”text value”>
<script>
let input = document.getElementById(“a”)
console.log(input.getAttribute(“value”))
console.log(input.value)
</script>
两者打印后果统一

  • input的value attribute是通过标签里value=”text value”定义,所以应用input.getAttribute(),如果须要批改则应用setAttribute(value,newValue)
  • input的property能够通过input.value获取

vue.js对value的解决

Vue.js 的 v-bind,个别状况下是在解决 attribute,如果要作为 property 解决的话,须要加上 .prop
不过 v-bind:value 却大都默认为解决 property 值,因为被强制转化了,例如:
<input id=”a” value=”text value”>
<script>
mounted(){
console.log(this.$el.getAttribute(‘value’))
console.log(this.$el.value)
console.log(this._vnode.data)
}
</script>
第一个console后果为null,第二个是text value,第三个后果是{attrs:{id:”input”},domProps:{value:”text value”}}
可见,vue.js将value作为vNode的data中domProps属性,而不是attrs属性,所以挂载后会作为property属性的value

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据