当前位置：首页 > 建站教程 >

Vue指令：v-model双向数据绑定(浅谈vue 多个变量同时赋相同值互相影响)

GG网络技术分享 2025-03-18 16:14 0

Vue指令：v-model双向数据绑定

关于双向数据绑定

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

v-model属性的值是一个数据的变量,如果数据的值发生变化,会影响input的值,input的值的变化同时影响数据的变化

1 v-model 指令的基本使用

示例代码如下:

<div id="app">

<input type="text" v-model="msg">

{{msg}}

</div>

<script>

var vm = new Vue({

el: '#app',

data: {

msg: 'hello world'

}

})

</script>

示例说明:

当修改数据msg里的内容是, input输入框中的内容就会发生改变.
当修改输入框中的内容时,数据也会自动发生变化

1.1利用其他方式处理模拟双向数据绑定

模拟双向数据绑定来理解v-model治理的核心:
代码如下:

<div id='vue-app'>

<h1> 自定义双向数据绑定 </h1>

<div>

<label>姓名：</label>

<input ref='name' type="text" :value="name" v-on:keyup="logName">

<span>{{ name }}</span>

</div>

<div>

<label>年龄：</label>

<input type="text" v-model="age">

<span>{{ age }}</span>

</div>

<script>

//实例化Vue对象

new Vue({

el: "#vue-app",

data: {

name: "",

age: ""

},

methods: {

logName: function () {

this.name = this.$refs.name.value;

}

})

</script>

2 关于checkbox

对于不能输入内容的表单,比如多选按钮,如果只有一个,或者有多个,v-model指令会有如何显示

2.1 checkbox上使用v-model

如果v-model,绑定的是一个字符串,咱们绑定的值,会转成布尔值,

选中就是true,不选择就是false

<div id="app">

<input type="checkbox" v-model="val">

{{val}} 

</div>

<script src="./node_modules/vue/dist/vue.js"></script>

<script>

var vm = new Vue({ // 根实例

el: '#app',

data: {

val: '',

},

})

</script>

2.2 没有value的checkbox上使用v-model绑定数组

如果绑定的是数组,则是为了收集选框的内容的.

如果标签没有value,则选中多选按钮时,,则数组里收集表单的值为null, 未选中,收集的值为空

<div id="app">

<input type="checkbox" v-model="val">

{{val}} 

</div>

<script src="./node_modules/vue/dist/vue.js"></script>

<script>

var vm = new Vue({ // 根实例

el: '#app',

data: {

val: [],

},

})

</script>

结果

2.3 有value的checkbox上使用v-model绑定数组

如果有value属性,那么选中取出的是value的值,未选中则为空

<div id="app">

<input type="checkbox" v-model="val" value='wuwei'>

{{val}} 

</div>

<script>

var vm = new Vue({ // 根实例

el: '#app',

data: {

val: [],

},

})

</script>

2.4 此时就可以收集多选按钮数据

<div id="app">

<input type="checkbox" v-model="val" value='小明'>

<input type="checkbox" v-model="val" value='小红'>

<input type="checkbox" v-model="val" value='张三'>

{{val}} 

</div>

<script>

var vm = new Vue({

el: '#app',

data: {

val: [],

},

})

</script>

显示结果

3 v-model结合radio类型的使用

3.1 v-model 收集单选数据的基本使用

可以使用v-model来收集单选按钮的数据

<div id="app">

<label for="male">

<input type="radio" id="male" name="sex" value="男" v-model="sex" />男

</label>

<label for="female">

<input type="radio" id="female" name="sex" value="女" v-model="sex"/>女

</label>

<h2>你选择的性别是:{{ sex }}</h2>

</div>

<script>

new Vue({

el:"#app",

data:{

sex:''

}

})

</script>

示例中,最开始时,没有默认选中项,

3.2 , 设置默认选中项

如果你希望页面一打开就默认选中男或者女

可以在Vue数据中用来收集当选按钮数据的属性中添加默认值

<div id="app">

<label for="male">

<input type="radio" id="male" name="sex" value="男" v-model="sex" />男

</label>

<label for="female">

<input type="radio" id="female" name="sex" value="女" v-model="sex"/>女

</label>

<h2>你选择的性别是:{{ sex }}</h2>

</div>

<script>

new Vue({

el:"#app",

data:{

sex:'男'

}

})

</script>

3.3 单选按钮的互斥

正常为了让两个单选按钮拥有互斥功能, 会给单选按钮添加name属性,值相同,表示两个单选按钮属于同一组

只用同一组的单选按钮才会有互斥功能

同样的, 如果我们使用的v-model双向数据绑定动态收集单选按钮数据, 单选按钮也会自动变为互斥的

<div id="app">

<label for="male">

<input type="radio" id="male" value="男" v-model="sex" />男

</label>

<label for="female">

<input type="radio" id="female" value="女" v-model="sex"/>女

</label>

<h2>你选择的性别是:{{ sex }}</h2>

</div>

<script>

new Vue({

el:"#app",

data:{

sex:'男' // 默认选中男

}

})

</script>

此时,就算去掉name属性, 两个单选按钮也依然是互斥的,因为双向绑定的是通过一个数据

4 v-model结合select类型使用

和checkbox一样, select也分单选和多选

4.1 select单选,只选择一个值

说明:

select如果是单选,意味着每次只能选中一个值.
select双向绑定的数据应该是一个字符串,每次值收集一个数据
如果select双向数据绑定的数据不是字符串,在选中内容后,数据也会被替换为字符串类型的数据

示例代码

<div id="app">

<select name="fluit" v-model="fluit">

<option value="苹果">苹果</option>

<option value="梨子">梨子</option>

<option value="香蕉">香蕉</option>

<option value="提子">提子</option>

<option value="葡萄">葡萄</option>

</select>

<h2>你选择水果是:{{ fluit }}</h2>

</div>

<script>

new Vue({

el:"#app",

data:{

fluit:'' // select为单选,每次只收集一个数据

}

})

</script>

示例说明:

此时就算你把数据中的fluit的值写成数组,当你选水果后,fluit值将会被替换为字符串数组
默认是没有一个水果被选中的,如果有默认选中的内容, 可以给fluit数据添加默认值

4.2 select单选多选,可以同时选中多个值

说明:

select标签添加了multiple属性,让下拉选择框变成多选的
select一但修改为多选, 意味着双向数据绑定的数据要收集多个数据
此时数据中用来收集数据的属性值应该为数组

示例代码:

<div id="app">

<select name="fluit" v-model="fluits" multiple>

<option value="苹果">苹果</option>

<option value="梨子">梨子</option>

<option value="香蕉">香蕉</option>

<option value="提子">提子</option>

<option value="葡萄">葡萄</option>

</select>

<h2>你选择水果是:{{ fluits }}</h2>

</div>

<script>

new Vue({

el:"#app",

data:{

fluits:[] // select为多选,每次收集一组数据

}

})

</script>

示例说明

因为是多选,使用数组来收集内容
如果要添加默认选中,也是使用数组罗列,如果不是数组,默认值将无效,可以逻辑多个默认值
如果用来收集数据的属性值不是数组,在选中内容后自动变成数据罗列数据

浅谈vue 多个变量同时赋相同值互相影响

首先，该项目用到了element-ui中的Tabs 标签；然后来龙去脉是酱紫的：

一个项目中需动态渲染一个列表billItemLIsts，列表中包含ｎ组小列表，其中小列表的state_pj用于改变该小列表中的radio，于是：

<el-tabs tab-position=\"left\" style=\"max-height:280px;\">

<el-tab-pane v-for=\"(itema,index) in billItemLIsts\" :key=\"itema.id\" :label=\"itema.title\" :value=\"itema.id\">

<div class=\"el-form-item__label\">{{subitem.title}}:</div>

<el-radio-group v-model=\"subitem.state_pj\" @change=\"changeSub(index,subindex)\">

<el-radio :label=\"chargeIs\">计费</el-radio>

<el-radio :label=\"chargeNo\">不计费</el-radio>

</el-radio-group>

</div>

</li>

</ul>

</el-tab-pane>

</el-tabs>

那么现在列表效果达到了，然鹅这个tab得放到dialog中，且存在取消与确定操作，确定时不用多说，取消时改变了的radio是不会自己变成我们想要的样子，于是乎：

//最终的收费设置数据

billItemLIsts: [],

//最终原始的收费设置数据

billItemLIstsOriginal: [],

没错现在billItemLIsts就可以随之怎么操作,因为我们有billItemLIstsOriginal记住了他最初的样子;

接下来就是付诸实际了:

// 取消修改收费设置

cancleChargeSet() {

this.billItemLIsts = this.billItemLIstsOriginal;

if(!this.chargeOpenIs){

this.chargingFunIs = 1;

}

然并卵…

百思不得其解,他并没有发挥自己的作用

这是因为在Object赋值的时候，传递的不是值，而是引用，他们指向了同一个空间！

搞清楚了原因就好下手啦

解决：

1.this.billItemLIsts = JSON.parse( JSON.stringify(this.billItemLIstsOriginal) );

2.或使用 ES6 的解析语法 this.billItemLIsts = { ...this.billItemLIstsOriginal }

补充知识：VUE(ES6) 导出变量、常量，方法

在lib.js文件中，使用 export{接口} 导出接口，大括号中的接口名字为上面定义的变量， import和export是对应的；

//lib.js 文件

let bar = \"stringBar\";

let foo = \"stringFoo\";

let fn0 = function() {

console.log(\"fn0\");

};

let fn1 = function() {

console.log(\"fn1\");

};

export{ bar , foo, fn0, fn1}

//main.js文件

import {bar,foo, fn0, fn1} from \"./lib\";

console.log(bar+\"_\"+foo);

fn0();

fn1();

以上这篇浅谈vue 多个变量同时赋相同值互相影响就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

浅谈vue 多个变量同时赋相同值互相影响 (https://www.wpmee.com/) javascript教程第1张

标签：

建站教程

Vue指令：v-model双向数据绑定(浅谈vue 多个变量同时赋相同值互相影响)