<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>input</title> </head> <body> <div id="input"> <span>Message is: {{ message }}</span><br> <input v-model="message" placeholder="edit me"> <br><br> <span>Multiline message is:</span> <span style="white-space: pre">{{ MultilineMessage }}</span><br> <textarea v-model="MultilineMessage" placeholder="add multiple lines"></textarea> <br><br> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <br><br> <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>Checked names: {{ checkedNames }}</span> <br><br> <input type="radio" id="one" value="A" v-model="picked"> <label for="one">A</label> <input type="radio" id="two" value="B" v-model="picked"> <label for="two">B</label> <br> <span>Picked: {{ picked }}</span> <br><br> <select v-model="selected1"> <option>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected1 }}</span> <br><br> <select v-model="selected" multiple> <option>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected }}</span> </div> <br> <div id="select"> <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select><br> <span>Selected: {{ selected }}</span> </div> <script src="js/vue.js"></script> <script> var vm = new Vue({ el:"#input", data: { message: 'Runoob', MultilineMessage: 'welcome', checked:true, checkedNames: [], picked:'A', selected1:'A', selected:'A' } }); var select = new Vue({ el:"#select", data: { selected:'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } }); </script> </body> </html>