作为 attribute 和 property 的 value 及 Vue.js 的相关处理

最新推荐文章于 2022-11-23 09:18:16 发布

Chanvin

最新推荐文章于 2022-11-23 09:18:16 发布

阅读量316

点赞数

文章标签： html javascript vue

本文链接：https://blog.csdn.net/chanvin/article/details/105762403

版权

本文探讨了HTML中的attribute和property的区别，特别是在value属性上的处理。当更新property value，attribute value不会自动同步，除非初始设置。Vue.js默认将value视为property处理，通常使用`:value`即可。然而，在动态组件或某些特定元素（如textarea）中，可能需要使用`:value.prop`确保value绑定到property。

摘要由CSDN通过智能技术生成

attribute 和 property 是 Web 开发中，比较容易混淆的概念，而对于 value，因其特殊性，更易困惑，本文尝试做一下梳理和例证

attribute 和 property 的概念

简单的说，attribute 是元素标签的属性，property 是元素对象的属性，例如：

<input id="input" value="test value">
<script>
let input = document.getElementById('input');
console.log(input.getAttribute('value')); // test value
console.log(input.value); // test value
</script>

input 的 value attribute 是通过标签里的 value=“test value” 定义的，可以通过 input.getAttribute(‘value’) 获取，可以通过 input.setAttribute(‘value’, ‘New Value’) 更新
input 的 value property 可通过 input.value 获取和更新，初始值是与 attribute 中的赋值一致的