v-model命令(双向绑定)

简介: v-model命令(双向绑定)

v-model命令(双向绑定)


格式:v-model="变量"

作用2:获取和设置表单里的值

作用2:表单里输入可以改变变量的值,修改变量可以改变表单的值


<div id="app">
<!--v-model:双向绑定,用户输入按提交可以更改变量的值,用户按修改也可以反向修改-->>
<form>
账号:<input type="text" v-model="uname"><br>    
密码:<input type="password" v-model="pwd"><br>
<input type="button"  @click="sub" value="提交">        
<input type="button"  @click="cs" value="修改账号密码">
</form>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            uname:"",
            pwd:"",
        },
        methods:{
            sub:function(){
               console.log(this.uname);
               console.log(this.pwd);
               if(this.pwd=="123"&&this.uname=="123"){
                   alert("登陆成功!");
               } else{
                   alert("登陆失败!");
               }
            },
            cs:function(){
                this.uname="000"
                this.pwd="000"
            }
        }
    })  
</script>
相关文章
|
JSON API Go
Go-Zero从0到1实现微服务项目开发(二)
继续更新GoZero微服务实战系列文章:上一篇被GoZero作者万总点赞了,本文将继续使用 Go-zero 提供的工具和组件,从零开始逐步构建一个基本的微服务项目。手把手带你完成:项目初始化+需求分析+表结构设计+api+rpc+goctl+apifox调试+细节处理。带你实现一个完整微服务的开发。
313 1
|
异构计算 内存技术
FPGA进阶(3):SDRAM读写控制器的设计与验证(一)
FPGA进阶(3):SDRAM读写控制器的设计与验证
358 0
|
5G 数据安全/隐私保护
DSSS、CCK 和 OFDM 调制方案
【8月更文挑战第23天】
1620 0
|
前端开发 JavaScript 开发者
深入理解前端性能优化中的Webpack Tree Shaking
【2月更文挑战第2天】在前端开发中,性能优化一直是开发者们不断追求的目标之一。而在这个过程中,Webpack Tree Shaking 技术作为一种重要的优化手段,对于减小前端应用的体积、提高加载速度起到了至关重要的作用。本文将深入探讨Webpack Tree Shaking 技术的原理和实现方式,帮助读者更好地理解并运用这一技术来优化前端应用性能。
|
弹性计算 算法 网络安全
共享带宽简介|学习笔记
快速学习共享带宽简介
共享带宽简介|学习笔记
|
存储 小程序 API
微信小程序 | 小程序系统API调用(二)
微信小程序 | 小程序系统API调用(二)
|
编解码 Linux C语言
开源STM32产品:无线点菜宝使用评测
开源STM32产品:无线点菜宝使用评测
184 0
L1-049 天梯赛座位分配 (20 分)
L1-049 天梯赛座位分配 (20 分)
394 0
|
前端开发 芯片 Python
【python】bin/dec/hex/bnr进制转换函数及fp32转十六进制
【python】bin/dec/hex/bnr进制转换函数及fp32转十六进制
369 0
【python】bin/dec/hex/bnr进制转换函数及fp32转十六进制