Vue.js学习总结（三）

最新推荐文章于 2024-12-17 16:46:04 发布

原创最新推荐文章于 2024-12-17 16:46:04 发布 · 406 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了Vue.js中v-model指令的使用方法，包括.lazy、.trim和.number修饰符的应用，以及在input、textarea和select元素上的双向数据绑定实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文章是在学习Vue.js课程后的个人总结，方便以后快速回顾。

学习网站：https://www.bilibili.com/video/BV17x411J73h
更加标准的Vue用法建议参考：https://vuejs.org/v2/guide/forms.html

v-model的使用方法

代码：

<div id="app">
         <input type="text" v-model.lazy="name">
         {{name}}
         <input type="text" v-model.trim="name">
         <pre>{{name}}</pre>
         <input type="text" v-model.number="price">
         {{price}}
    </div>

var app = new Vue({
    el:'#app',
    data:{
        name:'hhhh',
        price:10
    }
})

个人总结：

v-model用于数据双向绑定，将input标签输入的值传给name、price变量。
.lazy当input标签输入完数据执行任意操作后才将值赋给变量。
.trim存储input标签内容时会自动删除空格。
.number会将字符转化为数字。

代码：

<div id="app">
         <label>
             男
             <input v-model="sex" value="1" type="radio">
             女
             <input v-model="sex" value="2" type="radio">
             {{sex}}
         </label>
         <br>
         <label>
            男
            <input v-model="sexpre" value="1" type="checkbox">
            女
            <input v-model="sexpre" value="2" type="checkbox">
            {{sexpre}}
        </label>
        <br>
        <textarea v-model="text"></textarea>
        <div>请问你是不是傻瓜？</div>
        <select v-model="whether">
            <option value="1">是</option>
            <option value="2">不是</option>
        </select>
        </div>
        <div>请问你要去哪里？</div>
        <select v-model="dist" multiple>
            <option value="1">管你啥事</option>
            <option value="2">远方</option>
            <option value="3">远方</option>
            <option value="4">远方</option>
            <option value="5">远方</option>
        </select>
        </div>

var app = new Vue({
el:'#app',
data:{
    sex:1,
    sexpre:[],
    text:'zheshiyipianwenzhang  kenengnikanbudongzhehenzhengchang',
    whether:1,
    dist:null,
}
})