What are some examples of using v-model in Vue.js?

What are some examples of using v-model in Vue.js?

v-model is a directive in Vue.js that creates a two-way data binding on form inputs. For example, you can use it with an input element like this: <input v-model="inputValue">.

Can you show me a more complex example?

Sure! You can use v-model with a checkbox and a text input together. For instance:

<template>
  <input type="checkbox" v-model="isChecked">
  <input type="text" v-model="textValue" :disabled="!isChecked">
</template>
<script>
export default {
  data() {
    return {
      isChecked: false,
      textValue: ''
    };
  }
};
</script>

How does v-model work with select elements?

Great question! For select elements, you can bind the selected value like this:

<select v-model="selectedOption">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

What about using v-model with radio buttons?

You can use v-model with radio buttons to bind the selected value. Here's an example:

<input type="radio" value="male" v-model="gender"> Male
<input type="radio" value="female" v-model="gender"> Female