Vue基础demo-表单绑定

Vue基础demo-表单绑定


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<p>表单输入绑定:p>
<div id="app">
    多个复选框: 
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jacklabel>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">Johnlabel>
    <input type="checkbox" id="aa" value="aa" v-model="checkedNames">
    <label for="aa">aalabel>
    <p>{{checkedNames}}p>
    <hr>
    单选按钮: 
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">Onelabel>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Twolabel>
    <br>
    <span>Pick:{{picked}}span>
    <hr>
    选择框-单选: 
    <select v-model="selected">
        <option disabled value="">请选择option>
        <option>Aoption>
        <option>Boption>
        <option>Coption>
    select>
    <span>Selected:{{selected}}span>
    <hr>
    选择框-多选(选择时,按住Ctrl键,可以多选): 
    <select v-model="selecteds" multiple style="width:50px;">
        <option>Aoption>
        <option>A2option>
        <option>A3option>
    select>
    <span>selecteds:{{selecteds}}span><br>
    用v-for渲染的动态选项:
    <select v-model="selectedA">
        <option v-for="option in options" v-bind:value="option.value">
            {{option.text}}
        option>
    select>
<span>selectedA:{{selectedA}}span><hr>
    值绑定-复选框: 
    <input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
    <span>toggle:{{toggle}}span><hr>
    值绑定-单选按钮: 
    <input id="boy" type="radio" v-model="pick" v-bind:value="a">
    <label for="boy">label>
    <input type="radio" v-model="pick" v-bind:value="b" id="girl"><label for="girl">label>
    <span>pick:{{pick}}span><hr>
    值绑定-选择框的选项
    <select v-model="selectedB">
        <option v-bind:value="{number:123}">123option>select>
    <span>selectedB:{{selectedB}}--selectedB.number:{{selectedB.number}}span>
    <hr>
    修饰符
    <input v-model.number="age" type="number" max="10" min="1">
    <span>age:{{age}}span>
div>
<script>
    new Vue({
        el:'#app',
       data:{
           checkedNames:[],
           picked:'',
           selected:'',
           selectedA:'',
           selectedB:{},
           selecteds:[],
           options:[{text:'One',value:'A'},{text:'Two',value:'B'},{text:'Three',value:'C'},],
           toggle:'no',
           pick:'',
           a:'男',
           b:'女',
           age:15
       }
    });
script>
body>
html>

你可能感兴趣的:(Vue)