What are some examples of data binding in Vue.js?

What are some examples of data binding in Vue.js?

In Vue.js, data binding allows you to synchronize data between the model and the view. Here are a few examples:

1. Text Binding: Using {{ message }} to display a message in the template.
2. Input Binding: Using v-model to create two-way data binding with form inputs.
3. Conditional Rendering: Using v-if to conditionally display elements based on data.
4. List Rendering: Using v-for to render a list of items from an array.

Can you show me a code example for text binding?

Sure! Here's a simple example:

<div id="app">
  <p>{{ message }}</p>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});
</script>

This will display 'Hello, Vue!' in the paragraph.

What about input binding?

For input binding, you can use v-model. Here's an example:

<div id="app">
  <input v-model="inputText" placeholder="Type something...">
  <p>You typed: {{ inputText }}</p>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    inputText: ''
  }
});
</script>

This will update the paragraph as you type in the input.

Can you explain conditional rendering with an example?

Absolutely! Here's an example of conditional rendering using v-if:

<div id="app">
  <button @click="isVisible = !isVisible">Toggle Message</button>
  <p v-if="isVisible">This message is conditionally rendered!</p>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    isVisible: false
  }
});
</script>

Clicking the button will show or hide the message.