vue指令之v-model

最新推荐文章于 2024-09-19 23:33:56 发布

duansamve

最新推荐文章于 2024-09-19 23:33:56 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签： vue v-model

本文链接：https://blog.csdn.net/duansamve/article/details/79846487

版权

vue 专栏收录该内容

111 篇文章 6 订阅

订阅专栏

你可以用 v-model 指令在表单 <input> (text、checkbox、radio)、<select>及 <textarea> 元素上创建双向数据绑定。这些表单元素使用data中的相关属性来进行初始化，在执行input事件时又将自身输入值赋给相关的属性。

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

main.js：

var app = new Vue({
    el: "#app",
    data: {
        name: 'Samve',
        input: 'input',
        price: 10
    }
});

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--blur后才有效-->
    <p><input type="text" v-model.lazy="name"/></p>
    <pre>{{name}}</pre>

    <!--去掉前后空格-->
    <p><input type="text" v-model.trim="input"/></p>
    <pre>{{input}}</pre>

    <!--自动将填入的字符型数字转换为数值类型数字-->
    <p><input type="text" v-model.number="price"/></p>
    <pre>{{price}}</pre>
</div>

<script src="../lib/vue.js"></script>
<script src="./js/main.js"></script>
</body>
</html>

v-model等价于：

<input :value="searchText" @input="searchText = $event.target.value">

duansamve

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录