this.$set小例子

最新推荐文章于 2025-07-17 21:35:32 发布

cofecode

最新推荐文章于 2025-07-17 21:35:32 发布

阅读量1.4w

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js

本文链接：https://blog.youkuaiyun.com/cofecode/article/details/79133293

Vue.js 专栏收录该内容

29 篇文章

订阅专栏

如下图一，现在需要做一个单选框的功能。思路：for循环，将所有变成false，让当前变成true。在创建arr的过程中，先有name这个属性。然后利用for循环给arr的每一项添加一个状态。点击的时候，让arr中每一项的状态都变成false,让当前的状态变为true

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<table>
			<tr>
				<th>姓名</th>
				<th>操作</th>
			</tr>
			<tr v-for="item,index in arr">
				<td>{{item.name}}</td>
				<td>
					<input type="checkbox" v-model="item.status" @click="inputShow(index)" style="zoom:150%;">
				</td>
			</tr>
		</table>
	</div>
	
<script src='vue.js'></script>
<script>
    

    new Vue({
        el:'#app',
        data:{
        	arr:[
        		{
        			name :'小黄'
        		},
        		{
        			name :'小明'
        		},
        		{
        			name :'小红'
        		}
        	]
        },
        created:function() {
        	this.getArr()
        },
        methods:{
        	getArr() {
        		for (var i = 0; i < this.arr.length; i++) {
	        		this.arr[i].status = false
	        	}
        	},
        	inputShow (item) {
        		for (var i = 0; i < this.arr.length; i++) {
        			this.arr[i].status = false
        		}
        		item.status  = true
        		console.log(this.arr)
        	}
        }
    })
</script>
</body>
</html>