vue js data bind
<template>
<div>
<input v-model="message" placeholder="Enter a message">
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
};
}
};
</script>
Explanation:
1. The <template>
section contains the HTML structure of the component.
2. The <input>
element has a v-model
directive, which creates a two-way binding with the data property named "message."
3. The placeholder
attribute provides a default text in the input field.
4. The <p>
element displays the content of the "message" data property using the double curly braces {{ message }}
.
5. The <script>
section contains the JavaScript code for the component.
6. The data
function returns an object with an initial value of an empty string for the "message" property.
7. The component exports a default object with the specified data property.