为了账号安全,请及时绑定邮箱和手机立即绑定

如果不使用组件的话可不可以实现这个功能?​自己尝试了一下发现不知道如何获取当前点击的<li>标签的索引。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<link rel="stylesheet" href="./reset.css">

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

<title>Document</title>

</head>

<body>

<div id='root'>

<input v-model='inputValue'/>

<button @click='handleAdd'>添加</button>

<ul>

<li v-for="(item, index) in list" :key='index' :index="index" @click='handleDelete(index)'>{{item}}下标{{index}}</ul>

</ul>

</div>

</body>

<script>

new Vue({

el: '#root',

data: {

inputValue:'',

list:[]

},

methods: {

handleAdd: function() {

this.list.push(this.inputValue)

this.inputValue=''

},

handleDelete: function(e) {

this.list.splice(e.target,1)

}

}

})

</script>

</html>


正在回答

2 回答

你的<li>标签后面是</ul>

delete参数直接用index就可以取到的

0 回复 有任何疑惑可以回复我~

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

<div id="root">

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

<button @click="inputSubmit">提交</button>

<ul>

<li v-for="(item,index) of list"

@click="remove(index)">{{item}}下标{{index}}</li>

</ul>

</div>


<script>

new Vue({

el:"#root",

data:{

inputValue:'',

list:[]

},

methods:{

inputSubmit:function(){

this.list.push(this.inputValue);

this.inputValue=""

},

remove:function(index){

this.list.splice(index,1)

}

}

})

</script>

</body>

</html>

你的太乱了,我自己写了一个,你看一下

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

如果不使用组件的话可不可以实现这个功能?​自己尝试了一下发现不知道如何获取当前点击的<li>标签的索引。

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号