Vue 第一章练习 v-for

vue

1、练习v-for v-model 实现数据的增加和删除

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<!--cdn镜像快速导入Vue包-->

<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>

</head>

<body>

<div >

<!---->

id:<input type="text" value="id" v-model="id">

姓名:<input type="text" value="name" v-model="name">

性别:<input type="text" value="sex" v-model="sex">

<input type="button" value="添加" @click="btnAdd">

<input type="button" value="删除" @click="btnDel">

<p v-for="(user,i) in users" :key="user.name">

<input type="checkbox" @click="getState(i)">

序号:{{user.id}},姓名:{{user.name}},性别{{user.sex}}</p>

</div>

<script>

//2.创建一个vue实例

var vm = new Vue({

el: '#app', //表示当前我们new的这个Vue实例,要控制页面上的哪个区域

data: { //data属性中存放的是el中要用到的数据

users:[

{id:1,name:"yang",sex:'男'},

{id:2,name:"jie",sex:'男'},

{id:3,name:"shao",sex:'女'}

],

id:'',

name:'',

sex:'',

index:0,

},

methods:{

btnAdd(){

this.users.push({id:this.id,name:this.name,sex:this.sex})

},

getState(i){

console.log(i)

this.index = i

},

btnDel(){

console.log(this.index)

this.users.splice(this.index,1)

}

}

})

</script>

</body>

</html>

以上是 Vue 第一章练习 v-for 的全部内容, 来源链接: utcz.com/z/379959.html

回到顶部