Initialize the input box and set the placeholder text and style

1. Figures 1, 2, and 3 are the basic label and style Settings that require v-bind to dynamically bind variables.

2. The reason why we set the key with — is because the var() function is required. We’ll talk about var() in Chapter 2, we need to bind the styles to the input tag because the placeholder is the built-in property, so we just need to dynamically change the styles of placehoder.

Change placeholder text and styles dynamically with button click events

1. Figure 4, Figure 5, and Figure 6 dynamically change placeholder text and styles after click events.

2. The var() function is used to insert custom attribute values, which is useful if the same attribute value is used in more than one place. It has two attributes: var(custom-property-name, value) : custom-property-name Required. The name of the custom property, which must start with –. The value is optional. Alternate value, used when the attribute does not exist.

Third, summary

This is one of the problems I have encountered in front-end development, and I think that we may also encounter this kind of demand development in front-end development, so I write a demo based on the syntax of VUe3 to share with you here, hoping to be helpful to you. We can express more opinions, more exchanges, progress together.