vue checkbox code example

Example 1: radio button vue

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>

Example 2: vue checkbox

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

Example 3: vuejs checkbox

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Noms cochés : {{ checkedNames }}</span>

Example 4: vue form

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

Example 5: vue js on checkbox show div

var app = new Vue({
        el: '#selector',
        data: {
            checked: false
        }
});


<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
   <div id="selector">
    <div class="checkbox">
        <label><input type="checkbox" v-model="checked">Options</label>
    </div>
    <div class="container" id="app-container" v-if="checked">
        <p>Text is visible</p>
    </div>       
   </div>
</body>

Tags:

Javascript Example

Recent Posts