当前位置: 首页 > 编程笔记 >

vue.js 实现点击按钮动态添加li的方法

宰烈
2023-03-14
本文向大家介绍vue.js 实现点击按钮动态添加li的方法,包括了vue.js 实现点击按钮动态添加li的方法的使用技巧和注意事项,需要的朋友参考一下

如下所示:

<!DOCTYPE html>
<html>
 
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="js/vue.js" ></script>
 </head>
 
 <body>
 <div id="todo-list-example">
  <button v-on:click="ss">保存 </button>
  <ul>
  <li is="todo-item" v-for="(todo, index) in todos" v-text="sv" v-on:click="hh"></li>
  </ul>
 </div>
 </body>
 <script>
 Vue.component('todo-item', {
  template: `
  <li v-on:click="$emit('click')">
  {{ text }}
  </li>`,
  props: ['text']
 })
 new Vue({
  el: '#todo-list-example',
  data: {
  todos: [
   '+添加'
  ],
  sv:'+添加'
  },
  methods: {
  ss: function() {
   this.todos.push(this.sv)
  },
  hh:function(){
   alert(1)
  }
  }
 })
 </script>
 
</html>

以上这篇vue.js 实现点击按钮动态添加li的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍Repeater中添加按钮实现点击按钮获取某一行数据的方法,包括了Repeater中添加按钮实现点击按钮获取某一行数据的方法的使用技巧和注意事项,需要的朋友参考一下 本文以一个asp.net程序为例讲述了Repeater中添加按钮实现点击按钮获取某一行数据的方法,分享给大家供大家参考借鉴之用。具体步骤如下: 1.添加编辑按钮和删除按钮 具体代码如下: 2.选中Repeater控件,添

  • 本文向大家介绍layui实现点击按钮给table添加一行,包括了layui实现点击按钮给table添加一行的使用技巧和注意事项,需要的朋友参考一下 •问题描述:想实现点击按钮在表格添加一行的功能,但发现layuii并未集成该工具栏,因此,需要自己手动添加这个功能; •原先我写的table是这样实现的: 并不能实现添加的效果;后查询后发现,这样做是基于table是用静态的方式编写的,即: 而我用的是

  • 本文向大家介绍vue.js实现点击后动态添加class及删除同级class的实现代码,包括了vue.js实现点击后动态添加class及删除同级class的实现代码的使用技巧和注意事项,需要的朋友参考一下 最近使用vue需要实现一个点餐选择商品规格的页面,需要通过vue动态的给被点击的元素添加class名字,使其变色,其他的删除class。如图: 开始在网上找了许多办法发现不是太好用,最后找到一个发

  • 本文向大家介绍JavaScript实现向OL列表内动态添加LI元素的方法,包括了JavaScript实现向OL列表内动态添加LI元素的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JavaScript实现向OL列表内动态添加LI元素的方法。分享给大家供大家参考。具体分析如下: JavaScript向OL列表内动态添加LI元素的方法,下面JS代码每次点击按钮都会想OL列表中动态添加一个

  • Javascript(jQuery)代码 HTML/EJS代码 我读过的一些不起作用的帖子: 如何在单击按钮时通过动画显示视图? 尝试在单击按钮时显示div

  • 本文向大家介绍javascript实现点击按钮让DIV层弹性移动的方法,包括了javascript实现点击按钮让DIV层弹性移动的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了javascript实现点击按钮让DIV层弹性移动的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的javascript程序设计有所帮助。