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>
相关文章
|
小程序 容器 JavaScript
探索uni-app:构建跨平台应用的神奇工具
探索uni-app:构建跨平台应用的神奇工具
uniapp进行表单效验
uniapp进行表单效验
685 0
|
20天前
|
运维 网络协议 Shell
【网络运维】Ping不通?别慌!用Telnet和Netstat精准排查端口连通性
本文介绍网络排查两大利器:Telnet与Netstat。通过Ping只能检测服务器是否在线,而Telnet可测试端口连通性,区分“连接被拒”与“超时”;Netstat则用于服务端查看端口监听状态,识别如仅监听127.0.0.1导致外网无法访问的问题。结合ss命令和“三板斧”流程,快速定位网络故障。
|
3月前
|
JavaScript API 开发工具
如何在原生App中调用Uniapp的原生功能?
如何在原生App中调用Uniapp的原生功能?
692 139
uniapp使用路由名称跳转
【9月更文挑战第11天】在UniApp中,可通过定义路由名称实现页面跳转,需在`pages.json`中设置页面的`name`属性。使用`uni.navigateTo`等API并指定名称即可跳转,例如`name: &#39;detailPage&#39;`。目标页面可在`onLoad`函数中获取传递的参数,这种方式使代码更清晰且便于维护,尤其适合大型项目。
504 1
|
JSON 文字识别 小程序
UNIAPP小程序OCR识别
UNIAPP小程序OCR识别
615 0
UNIAPP小程序OCR识别
|
移动开发 JSON 小程序
uni-app 多端开发 精读
uni-app 多端开发 精读
261 3
|
JSON API Go
Go-Zero从0到1实现微服务项目开发(二)
继续更新GoZero微服务实战系列文章:上一篇被GoZero作者万总点赞了,本文将继续使用 Go-zero 提供的工具和组件,从零开始逐步构建一个基本的微服务项目。手把手带你完成:项目初始化+需求分析+表结构设计+api+rpc+goctl+apifox调试+细节处理。带你实现一个完整微服务的开发。
485 1
|
JSON 数据可视化 JavaScript
低代码可视化-uniapp响应式数据data-代码生成器
低代码可视化-uniapp响应式数据data-代码生成器
276 0
|
异构计算 内存技术
FPGA进阶(3):SDRAM读写控制器的设计与验证(一)
FPGA进阶(3):SDRAM读写控制器的设计与验证
590 0