这里我将Vue官网的所有表单属性进行了实现，包括各种表单的数据操作（比如设置默认值，选中值，等等~）。
下面代码可以直接参考使用，希望使你工作效率飞一般的快！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中v-for的常见使用</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<script>
window.onload = function(){

    //创建一个vue实例
    var app = new Vue({
        el: '#app',
        data: {
            message:"mayouchen is handsome!",
            checked: true,
            checkedNames: ['John'],
            picked: 'One',
            selected: 'A',
            selectedMulit:['B','C'],
            selectedAutoSign: 'A',
            options: [
                { text: 'One', value: 'A' },
                { text: 'Two', value: 'B' },
                { text: 'Three', value: 'C' },
                { text: 'four', value: 'D' }
            ],
            selectedAutoMulit: ['C','D'],
            optionsMulit: [
                { text: 'One', value: 'A' },
                { text: 'Two', value: 'B' },
                { text: 'Three', value: 'C' },
                { text: 'four', value: 'D' }
            ],
            msg:"马优晨",
            msg2:123454

        },        
        mounted:function(){
          console.log(`${this.msg} 和 ${this.msg2}`);
        }
    })
}

</script>
<body>
    <div id="app">
        <template>

            <div  style="color:red;margin-top:20px">input框</div>
            <input v-model="message" placeholder="请在此编辑~">
            <span>输入的信息: {{ message }}</span>


            <div  style="color:red;margin-top:20px">textarea框</div>
            <textarea v-model="message" placeholder="请在此编辑~"></textarea>
            <span>输入的信息:{{ message }}</span>


            <div  style="color:red;margin-top:20px">单选框</div>
            <input type="checkbox" id="checkbox" v-model="checked">
            <span for="checkbox">{{ checked }}</span>

            <div  style="color:red;margin-top:20px">多选框(默认选中一个值)</div>
            <div class="checkMuliply">
                <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>
            </div>

            <div   style="color:red;margin-top:20px">单选按钮</div>
            <div>
                <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>Picked: {{ picked }}</span>
            </div>

            <div   style="color:red;margin-top:20px">选择框（单选）</div>
            <div>
                <select v-model="selected">
                    <option disabled value="">请选择</option>
                    <option>A</option>
                    <option>B</option>
                    <option>C</option>
                </select>
                <span>Selected: {{ selected }}</span>
           </div>

           <div   style="color:red;margin-top:20px">选择框（多选）</div>
           <div>
                <select v-model="selectedMulit" multiple style="width: 50px;">
                  <option value="A">A</option>
                  <option value="B">B</option>
                  <option value="C">C</option>
                  <option value="D">D</option>
                </select>
                <br>
                <span>Selected: {{ selectedMulit }}</span>
            </div>


           <div  style="color:red;margin-top:20px">动态遍历-选择框（单选）</div>
           <select v-model="selectedAutoSign">
                <option v-for="option in options" v-bind:value="option.value" :key="option.value">{{ option.text }}</option>
              </select>
           <span>Selected: {{ selectedAutoSign }}</span>


           <div   style="color:red;margin-top:20px">动态遍历-选择框（多选）</div>
           <select v-model="selectedAutoMulit"  multiple style="width: 50px;">
                <option v-for="item in optionsMulit" v-bind:value="item.value" :key="item.value">{{ item.text }}</option>
              </select>
           <span>Selected: {{ selectedAutoMulit }}</span>

           <div  style="color:red;margin-top:20px">input框要求数据在“change”时而非“input”时更新，并去过滤用户输入的首尾空白字符</div>
           <input v-model.laz.trim="msg" />

           <div  style="color:red;margin-top:20px">input框要求数据在“change”时而非“input”时更新，并去过滤用户输入的首尾空白字符,并且输入的是数字</div>
           <input v-model.laz.trim.number="msg2" />


        </template>
    </div>
</body>
</html>

效果图如下：

这里写图片描述

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue