第五节：表单标签的用法——value绑定和修饰符

时间：2023-11-19 13:26:08

1、表单标签的用法——value绑定和修饰符

value绑定的写法：v-bind:value 或者简写 :value

修饰符: lazy , Number , trim . 用法如：  v-model.lazy

2、使用表单的时候需要注意

  • v-bind:true-value和v-bind:false-value 的两个属性只是用在checkbox上
  • checkbox和radio需要设置初始值的时候，要在v-model绑定的值上直接设置，不要用html标签属性selected。

3、例子详解

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" v-on:click="printValue" value="输出表单的值" />
        <!-- 这样的话，isApple就是true或者false -->
        <input type="checkbox" v-model="isApple" />
        <!-- 这样的话，apple就是a或者b -->
        <input type="checkbox" v-model="apple" v-bind:true-value="a" v-bind:false-value="b" />
        <!-- 这样的话，选中的appleO就是一个对象 ，绑定了对象c-->
        <input type="radio" v-model="appleO" v-bind:value="c">
        <br>
        <!--在第二节：指令的使用（2）中也提到了表单的修饰符-->

        <p>lazy 将input的数据改变发生到change事件中，不添加默认是同步改变的。</p>
        <input type="text" v-model.lazy="appleT" />
        <span>{{appleT}}</span>
        <br>
        <p>trim 自动过滤用户输入的首尾空格</p>
        <input type="text" v-model.trim="appleM" />
        <span>{{appleM}}</span>
        <br>
        <p>自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值）</p>

        <input type="text" v-model.Number="appleN" />
        <span>{{typeof appleN}}</span>
    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            isApple: "",
            apple: "",
            a: "1",
            b: "2",
            c: {
                a: 1
            },
            appleO: "",
            appleT: "",
            appleM: "",
            appleN: ""
        },
        methods: {
            printValue: function() {
                var thisData = this.$data;
                console.log(thisData.isApple);
                console.log(thisData.apple);
                console.log(thisData.appleO);
            }
        }
    });
</script>

</html>

如果本章没有涉及到的您想看的表单知识，请看   第二节：指令的使用（2）

相关文章