vue学习笔记3： vue中的表单绑定 v-model

最新推荐文章于 2024-06-25 15:53:03 发布

老驴看景

最新推荐文章于 2024-06-25 15:53:03 发布

阅读量667

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_43835194/article/details/110495315

版权

v-model 双向绑定多用于表单绑定和各类表单元素都可以形成绑定多用于select

select绑定时option带有value时，获取value值，没有定义value时，获取option里面的文本

v-model修饰符 :

v-model.lazy 表示输入框失焦时对数据绑定
v-model.number 表示只能获得number属性的值
v-model.trim 表示去除掉input里面的空格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-model</title>
</head>

<body>
    <div id="app">
        <form action="">
            <textarea type="text" v-model='value'></textarea>
            <input type="radio" value="radio" v-model = 'value'>
            <input type="checkbox" v-model = 'value'>
            <select v-model='value'>
                <option disabled="disabled">---请选择----</option>
                <option value="1">a</option>
                <option value="2">b</option>
                <option value="3">c</option>
                <option value="4">d</option> 
                <option value="5">e</option>
            </select>
            <input type="text" v-model.number = 'value'>
            {{value}}
        </form>
       
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                value:''
            },
            watch: {
                value: function() {
                    console.log(typeof this.value)
                    console.log(this.value)
                }
            }
        })
    </script>
</body>

</html>

老驴看景

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记3： vue中的表单绑定 v-model

v-model双向绑定多用于表单绑定和各类表单元素都可以形成绑定多用于select select绑定时option带有value时，获取value值，没有定义value时，获取option里面的文本v-model修饰符 :v-model.lazy表示输入框失焦时对数据绑定 v-model.number表示只能获得number属性的值 v-model.trim表示去除掉input里面的空格 <!DOC...
复制链接

扫一扫