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>
相关文章
|
7月前
组件v-model
组件v-model
64 0
|
5月前
vue2 自定义 v-model (model选项的使用)
vue2 自定义 v-model (model选项的使用)
822 1
|
5月前
|
JavaScript
vue 【详解】父子组件传值、父子组件数据双向绑定 —— : | update: |.sync | v-bind.sync | v-model(含model选项和自定义v-model)
vue 【详解】父子组件传值、父子组件数据双向绑定 —— : | update: |.sync | v-bind.sync | v-model(含model选项和自定义v-model)
53 1
|
5月前
vue3【实用教程】v-model(含给 v-model 添加参数,绑定多个 v-model ,v-model 的内置修饰符,自定义 v-model 的修饰符等)
vue3【实用教程】v-model(含给 v-model 添加参数,绑定多个 v-model ,v-model 的内置修饰符,自定义 v-model 的修饰符等)
198 0
|
6月前
|
JavaScript
Vue的双向绑定v-model详细介绍
Vue的双向绑定v-model详细介绍
|
7月前
|
JavaScript
【vue】v-model双向绑定
【vue】v-model双向绑定
39 0
|
7月前
|
JavaScript 编译器
组件 v-model
组件 v-model
|
JavaScript
【Vue】—数据的双向绑定v-model
【Vue】—数据的双向绑定v-model
自定义组件使用v-model
自定义组件使用v-model
|
JavaScript 前端开发
Vue系列教程(10)- Model数据内容双向绑定(v-model)
Vue系列教程(10)- Model数据内容双向绑定(v-model)
122 0