zoukankan      html  css  js  c++  java
  • input select 值得绑定与获取

    <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
    12324325',
                checkNames: [],
                checked: false,
                selected: '',
                Infos: [{ obj: 'asasa', value: '11'}, {obj:'fdfsd',value:'22'}]
            }
    
        })
    
        function getValue() {
            alert($("#txt01").val());
    
        }
    
    
    </script>
    

      

  • 相关阅读:
    阻塞队列之LinkedTransferQueue
    BlockingQueue drainTo()
    jedis常用API
    在Redis集群中使用pipeline批量插入
    序列化
    springmvc单文件上传
    hibernateValidate
    springmvc使用spring自带日期类型验证
    springmvc自定义日期编辑器
    springmvc__SimpleUrlHandlerMapping(对访问地址进行加工,以键值对的形式)
  • 原文地址:https://www.cnblogs.com/hnzheng/p/9140425.html
Copyright © 2011-2022 走看看