SoFunction
Updated on 2025-04-05

Specific use and differences between attribute and property in vue

As the value and related processing of attribute and property

attribute and property are concepts that are more confusing in web development, and for value, it is more confusing due to its particularity. This article tries to sort out and illustrate.

The concept of attribute and property

Simply put, attribute is the attribute of the element tag, and property is the attribute of the element object, for example:

<input  value="test value">
<script>
let input = ('input');
(('value')); // test value
(); // test value
</script>
  • The value attribute of input is defined by the value="test value" in the tag, and can be obtained through ('value') and updated through ('value', 'New Value')
  • The value property of input can be obtained and updated through , the initial value is consistent with the assignment in the attribute

Binding of attribute and property

If the value of attribute value is updated at the beginning, the value of property will also change accordingly

However, if you update the value of property value (enter or assign a new value to the text box), the attribute value will not change accordingly. If you update the value of attribute, the property value will no longer change accordingly. As shown in this animation, you can also access this page to try operations

This is actually the dirty value flag at work. The initial value of dirty value flag is false, that is, the update of attribute value will change the corresponding property value by default. However, once the user interacts with the property value, the value of dirty value flag will become true, that is, the update of attribute value will not change the corresponding property value.

So in actual projects, we are generally dealing with value as property

Handling value

Generally used :value

v-bind is usually used to process attribute. If it is to be processed as a property, .prop needs to be added

However, v-bind:value mostly defaults to processing property values ​​because it is forced to convert, for example:

<input  :value="'test value'" >
<script src="/npm/vue/dist/"></script>
<script>
let input = new Vue({
  el: '#input',
  mounted () {
    (this.$('value')); // null
    (this.$); // test value
    (this._vnode.data) // {attrs: {id: "input"}, domProps: {value: "test value"}}
  }
});
</script>

It can be seen that value is used as the property of domProps in the data of VNode, rather than attrs, so after mount it will become the value of property

In the source code, the process of forcing the property to be converted is as follows:

// src/compiler/parser/
function processAttrs (el) {
...
        if ((modifiers && ) || (
          ! && platformMustUseProp(, , name)
        )) {
          addProp(el, name, value, list[i], isDynamic)
        } else {
          addAttr(el, name, value, list[i], isDynamic)
        }

The definition of platformMustUseProp on the web platform is as follows:

// src/platforms/web/util/
const acceptValue = makeMap('input,textarea,option,select,progress')
export const mustUseProp = (tag: string, type: ?string, attr: string): boolean => {
  return (
    (attr === 'value' && acceptValue(tag)) && type !== 'button' ||
    (attr === 'selected' && tag === 'option') ||
    (attr === 'checked' && tag === 'input') ||
    (attr === 'muted' && tag === 'video')
  )
}

From the above, it can be seen that the value of input, textarea, option, select, progress with type not of button will be forced to be a property without setting it to:

For example, the textarea tag itself does not support value attribute, so the value of value in the following code will not be displayed in the multi-line text box

<textarea value="test value"></textarea>

But in the following code can be successfully bound to the value property and displayed in the multiline text box

<textarea :value="'test value'"></textarea>

Special circumstances use:

The above source code also needs to be noted that it is forced to be a property and must satisfy !, that is, it is not a dynamic component, because the value of the dynamic component is its attribute value

That is, the v-bind of dynamic components is used as attribute by default. If you want to be a property, you need to use .prop, for example:

<div >
  <component :is="element" :="'test value'"></component>
  <button @click="change">Change</button>
</div>
<script src="/npm/vue/dist/"></script>
<script>
let app = new Vue({
  el: '#app',
  data: {
    element: 'input'
  },
  methods: {
    change () {
       = 'input' ===  ? 'textarea' : 'input';
    }
  }
});
</script>

If you delete the .prop of : in the above component, and when switching to textarea, its value will not be displayed in the multi-line text box. You can click the toggle tab on this page to view it

Summarize

  • The binding relationship of the value of the attribute and property will be invalid after the user interacts with the value
  • Generally, use :value to make value a property
  • Dynamic templates need to use : to make value a property

This is the article about the specific use and differences between attribute and property in vue. This is all about this article. For more related vue attribute property content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!