Vue基础(七)

最新推荐文章于 2022-08-18 13:53:36 发布

夜刀神十三香

最新推荐文章于 2022-08-18 13:53:36 发布

阅读量156

点赞数 1

分类专栏：记录笔记学习笔记简单实例文章标签： vue

本文链接：https://blog.csdn.net/qq_44990139/article/details/95625560

版权

笔记同时被 3 个专栏收录

65 篇文章 0 订阅

订阅专栏

学习笔记

65 篇文章 0 订阅

订阅专栏

记录

64 篇文章 0 订阅

订阅专栏

表单绑定

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

单选 :
v-model
:checked

复选:
v-model=“数组”,获取所有选中的value值
v-model=“字符串”,获取的是true/false

下拉列表:
如果option没有添加value将获取标签之间的值text
如果添加value获取value的值
如果有value相同,并且是多选会一次性选择所有

文本域
修饰符
.lazy : 懒加载,当失去光标修改数据
.number : 默认input的值全部是String,将字符串转换成number类型
.trim : 去除前后的空格

<body>
    <div id="app">
        <!-- <input type="radio" checked="picked"> -->
        <hr>
        性别 : <input type="radio" v-model="gender" name="gender" value="男">男
                <input type="radio" v-model="gender" name="gender" value="女">女
        选择:{{gender}}
        <hr>
        <input type="checkbox" v-model="textChecked" @click="all" value="全选">全选
        <hr>
        <input type="checkbox" v-model="textChecked" value="html">html
        <input type="checkbox" v-model="textChecked" value="css">css
        <input type="checkbox" v-model="textChecked" value="js">js
        <input type="checkbox" v-model="textChecked" value="JQury">JQury
        <br>
        {{textChecked}}
        <hr>
            <select name="" id="" v-model="textSelect" multiple>
                <option value="张三">张三</option>
                <option value="李四">李四</option>
                <option value="王五">王五</option>
                <option value="赵六">赵六</option>
            </select>
            {{textSelect}}
            <hr>
            <input type="checkbox"
            v-model="toggle"
            :true-value="value1"
            :false-value="value2">
            {{toggle}}
            <hr>
            <!-- 懒加载,失去光标后才会加载 -->
            <input type="text" v-model.lazy="msg">
            {{msg}}
            <br>
            <!-- 将输入的数字转化为num类型 -->
            <input type="text" v-model.number="num">
            <!-- 获得文本框中值的类型 -->
            {{typeof num}}
            <br>
            <!-- 获取文本框中值的长度 -->
            <input type="text" v-model.trim="msg">
            {{msg.length}} <hr>
            <select name="" id="">
                <option v-for="(item,index) in seelctArr"
                :key="index"
                ></option>

            </select>
    </div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                picked:true,
                gender:"男",
                checked:false,
                textChecked:['html'],
                textSelect:["张三","李四"],
                text:"adsad",
                value1:"同意",
                value2:"不同意",
                toggle:"同意",
                msg:"",
                num:0,
                seelctArr:[{id:1001,name:"苹果"},{id:1002,name:"西瓜"},{id:1003,name:"榴莲"},]
            },
            methods: {
                all:function(){
                    this.textChecked=true
                },
                select:function(){
                    this.textChecked=[]
                }

            },

        })
    </script>

</body>

夜刀神十三香

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础(七)

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

扫一扫

专栏目录