乐趣区

关于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

退出移动版