input select 值得绑定与获取

Vue.js双向数据绑定示例

最新推荐文章于 2022-05-01 17:55:10 发布

weixin_30577801

最新推荐文章于 2022-05-01 17:55:10 发布

阅读量363

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hnzheng/p/9140425.html

本文通过一个Vue实例展示了如何使用v-model实现输入框、复选框等元素的双向数据绑定。包括单个和多个复选框的状态绑定、下拉列表的选择项绑定等，并附带了一个获取输入框当前值的简单按钮示例。

<div style="margin-top:100px">
    <!--Input 值得绑定-->
    <div id="app20">
        <input id="txt01" v-model="message" placeholder="请输入..." />
        <span>{{ message }}</span>
        <textarea id="area" v-model="message2"></textarea>

        <!--单个复选框   true  false-->
        <input type="checkbox" id="c00" v-model="checked" />
        <span>{{ checked }}</span>


        <!--多个复选框绑定同一个数组即可    value的值得数组-->
        <label for="c01">选择框1</label>
        <input type="checkbox" id="c01" value="c01" v-model="checkNames" />
        <label for="c02">选择框2</label>
        <input type="checkbox" id="c02" value="c02" v-model="checkNames" />
        <label for="c03">选择3</label>
        <input type="checkbox" id="c03" value="c03" v-model="checkNames" />
        <span>{{ checkNames }}</span>

        <!-- select 列表-->
        <select v-model="selected" name="fruit">
            <option v-for="va in Infos" v-bind:value="va.value">{{ va.obj }}</option>       
        </select>
        <span>{{ selected }}</span>
</div>
<button id="btn" onclick="getValue()">获取值</button>

<script>
    new Vue({
        el: "#app20",
        data: {
            message: '',
            message2: 'hahah\r\n12324325',
            checkNames: [],
            checked: false,
            selected: '',
            Infos: [{ obj: 'asasa', value: '11'}, {obj:'fdfsd',value:'22'}]
        }

    })

    function getValue() {
        alert($("#txt01").val());

    }


</script>

转载于:https://www.cnblogs.com/hnzheng/p/9140425.html