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

本文详细介绍 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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

听雪闻歌

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值