Vue：vue基础知识之利用v-model指令

最新推荐文章于 2025-07-06 22:42:23 发布

原创最新推荐文章于 2025-07-06 22:42:23 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍 Vue 中 v-model 指令的应用场景与实践技巧，包括文本输入、复选框、单选按钮等元素的数据绑定示例。通过具体代码案例帮助读者掌握 v-model 的核心用法。

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

Vue：vue基础知识之利用v-model指令

1、结果界面显示

2、v-model.html文件代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title><!DOCTYPE html>
<html lang="en">
<head>
    <title>v-v-model数据源绑定实例</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type='text/javascript' src='../assets/js/vue.js' ></script>
</head>
<body>
    <h1>v-model数据源绑定实例啦</h1>
    <hr>
    <div id="app" >
        <!-- 模板的输出方式，把message变量渲染到模板里 -->
        <p>原始文本信息{{message}} 我是Jason Niu</p>
        <h3>文本框</h3>
        <!-- lazy属性延缓加载数据、number属性必须是数字、trim前后去空格  -->
        <p>v-model:<input type='text' v-model='message'> </p>
        <p>v-model.lazy:<input type='text' v-model.lazy='message'> </p>
        <p>v-model.number:<input type='text' v-model.number='message'> </p>
        <p>v-model.trim:<input type='text' v-model.trim='message'> </p>
        <hr>
            <h3>文本域双向绑定</h3>
            <textarea cols='30' rows='10' v-model='message'></textarea>
            <h3>多选框绑定一个数值</h3>
            <input type='checkbox' id='isTrue' v-model='isTrue'>
            <label for='isTrue'>{{isTrue}}</label>
        <hr>
        <p>
            <!-- 定义选择按钮 -->
            <h3>多选框绑定数组</h3>
            <input type='checkbox' id='JasonNiu' value='JasonNiu_value' v-model='web_names'>
            <label for='isTrue'>JasonNiu</label>
            <input type='checkbox' id='Jason' value='Jason_value' v-model='web_names'>
            <label for='isTrue'>Jason</label>
            <input type='checkbox' id='Niu' value='Niu_value' v-model='web_names'>
            <label for='isTrue'>Niu</label>
        </p>
        <!-- 将勾选选择按钮时，内容插到页面上 -->
        <P>{{web_names}}</P>
        <hr>
        <h3>多选框绑定数组</h3>
        <p>
            <input type='radio' id='one' value='男' v-model='sex'>
            <label for='one'>男</label>
            <input type='radio' id='two' value='女' v-model='sex'>
            <label for='two'>女</label>
            <p>你选择的性别是：{{sex}}</p>
            
        </p>

    </div>
    
    <script type='text/javascript'>
       //声明变量且实例化(生成器)
        var app =new Vue({
            el:'#app',
            data:{
                message:'欢迎进入机器学习的世界！',
                isTrue:true,
                web_names:[],
                sex:'男'
            }

        })
    
    </script>
</body>
</html>