vue.js学习笔记之v-model与表单

1.v-model:你可以用 v-model 指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。2.v-model之文本框：<div id="app"><p>输入框</p><input type=

Tstr

246人浏览 · 2020-09-24 21:25:34

Tstr · 2020-09-24 21:25:34 发布

1.v-model:
你可以用 v-model 指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

2.v-model之文本框：

 <div id="app">
        <p>输入框</p>
        <input type="text" style="color: red;" maxlength="10" v-model="msg1" placeholder="请任意发挥！" onkeyup='this.value = this.value.replace(/\D/gi,"")' dir="rtl">
        <p>您输入的是:{{msg1}}</p>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                msg1: ''
            },
        })
    </script>
</body>

拓展：
1.文本框输入字数限制10个 –maxlength = "10"
2.输入颜色为红色--直接style样式
3.由右往左输入–dir="rtl"
4.输入限定为数字–注：用type = number可以实现，但是会产生副作用，比如maxlength会失效等等，不推荐使用，可以使用正则表达式。οnkeyup='this.value=this.value.replace(/\D/gi,"")
结果：
在这里插入图片描述
3.v-model之文本域：

  <div id="app">
        <p>文本域</p>
        <textarea v-model="msg" maxlength="10" name=" test " id="1" cols="30 " rows="10 " dir="rtl" style="color: blue;font-size: 30px; resize: none;"></textarea><span>您输入的内容：{{msg}}</span>

    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                msg: ''
            }
        })
    </script>
</body>

拓展：
1.文本域禁止拖动— resize: none
2.输入内容字数限制 —maxlength
3.内容倒序显示并：—dir = "trl"

4.v-model之多选框：

 <div id="app">
        <p>假设以下都能实现，你会选择：</p>
        <input type="checkbox" id="c1" value="100万" v-model="checkboxArrays">
        <label for="c1" style="color: green;">100万</label>
        <input type="checkbox" id="c1" value="佳丽三千" v-model="checkboxArrays">
        <label for="c1" style="color: orange;">佳丽三千</label>
        <input type="checkbox" id="c1" value="死提姆永久超级VIP" v-model="checkboxArrays">
        <label for="c1" style="color: red;">死提姆永久超级VIP</label>
        <br>
        <span>恭喜你获得了{{checkboxArrays}}，恭喜恭喜！</span>

    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                checkboxArrays: []
            }
        })
    </script>

结果：
在这里插入图片描述
5.v-model之单选按钮：

 <div id="app" style="background-color:aquamarine;">
        <p>英雄正在推塔中，而女朋友来了一个电话，你会？</p>
        <input type="radio" id="r1" value="这是个正确的选择" v-model="radios">
        <label for="r1" style="color:green;font-size: 15px;">接</label>
        <input type="radio" id="r2" value="等死吧，你~你你~~你等死吧！" v-model="radios">
        <label for="r2" style="color: orchid;font-size: 20px;">不接</label>
        <input type="radio" id="r3" value="我仿佛听到了Shutdown的声音！" v-model="radios">
        <label for="r3" style="color:red;font-size: 25px;">继续打游戏</label>
        <input type="radio" id="r3" value="恭喜你做了明智的选择！！" v-model="radios"> <img src="imgs/" alt="">
        <label for="r3" style="color:red;font-size: 30px;">毫不犹豫，接</label>
        <br>
        <span>
            <p style="color: fuchsia;font-size: 80px;">{{radios}}</p>
            </span>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                radios: ''
            }
        })
    </script>

注解：在该单选按钮中，value的值才是真正你选择时会触发的值，而在label中的值，仅仅是做为一种描述，静态显示在网页上，作为一种提示信息。
结果：
在这里插入图片描述
5.v-model之单选框：

<div id="app">
    <select v-model="selected">
        <option disabled value="">请选择你的最爱：</option>
        <option selected style="color: aqua; font-size: 20px;">打游戏</option>
        <option style="color: rebeccapurple; font-size: 30px;">偶尔打游戏</option>
        <option style="color:red;font-size: 40px;">一直打游戏</option>
      </select>
    <span>你选择了---></span> {{ selected }}</span>
</div>
 let app = new Vue({
            el: "#app",
            data: {
                selected: "",

            }
        })

注解：1.select中的value的值，是传到后台处理的值，并不会显示到页面
2.若为多选需求时，在select中加上 multiple即可

结果：
在这里插入图片描述 6.v-model之动态渲染：

<body>
    <div id="app">
        <select v-model="selected">
            <option v-for="option in options" style="color: blue;;" v-bind:value="option.value">
             {{ option.text }}
            </option>
          </select>

        <p>分数:</p>
        <p style="color: red;">{{ selected }}</p>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                selected: '100',
                options: [{
                    text: '物理',
                    value: '100'
                }, {
                    text: '数学',
                    value: '140'
                }, {
                    text: '化学',
                    value: '110'
                }]
            }
        })
    </script>
</body>