js 动态添加标签

最新推荐文章于 2022-10-30 02:26:12 发布

原创最新推荐文章于 2022-10-30 02:26:12 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js 动态按钮动态添加标签

本文介绍了一个使用Vue.js实现动态添加和移除列表项的简单示例。通过键入内容并按下回车键即可将输入的内容作为新的列表项添加到页面上，同时提供了移除已添加列表项的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面的这种写法：可以动态的添加标签，而且特别的简单，只不过是用vue.js 写的，如果看不懂，baidu一下vue.js

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="newTodo" v-on:keyup.enter="clearTodo">
<ul>
<li v-for='todo in todos'>
<span>{{todo.text}}</span>
<button v-on:click="removeTodo($index)">x</button>
</li>
<button v-on:click="addTodo">+</button>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
newTodo:'this is my world',
todos:[
{text:'this is 1 world'},
]
},
methods:{
clearTodo:function(){
this.newTodo='asdfasdfadfadfa'
},
removeTodo:function(index){
this.todos.splice(index,1)
},
addTodo:function(){
var ab=this.todos.length;
if(ab){
var cd=this.todos[ab-1].text.substr(8,2);
}else{
var cd=0;
}

console.log(cd);
this.todos.push({text:'this is '+(++cd)+' world'})
}
}

})
</script>
</body>
</html>