Vue基础demo-表单绑定

最新推荐文章于 2023-04-14 16:08:38 发布

Torey_Li

最新推荐文章于 2023-04-14 16:08:38 发布

阅读量301

点赞数

分类专栏： Vue 文章标签： vue基础表单绑定

本文链接：https://blog.csdn.net/Torey_Li/article/details/88379333

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Vue基础demo-表单绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p>表单输入绑定：</p>
<div id="app">
    多个复选框:&nbsp
    <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="aa" value="aa" v-model="checkedNames">
    <label for="aa">aa</label>
    <p>{{checkedNames}}</p>
    <hr>
    单选按钮:&nbsp
    <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>Pick:{{picked}}</span>
    <hr>
    选择框-单选:&nbsp
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected:{{selected}}</span>
    <hr>
    选择框-多选(选择时，按住Ctrl键，可以多选)：&nbsp
    <select v-model="selecteds" multiple style="width:50px;">
        <option>A</option>
        <option>A2</option>
        <option>A3</option>
    </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>
    值绑定-复选框：&nbsp
    <input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
    <span>toggle:{{toggle}}</span><hr>
    值绑定-单选按钮：&nbsp
    <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}">123</option></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>

Torey_Li

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础demo-表单绑定

Vue基础demo-表单绑定&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="https://cdn.stat
复制链接

扫一扫

专栏目录