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


Posted in Javascript onSeptember 07, 2018

如下所示:

<!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的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 分栏效果实现代码
Aug 29 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
新老版本juqery获取radio对象的方法
Mar 01 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 Javascript
node.js中express-session配置项详解
May 31 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
js正则表达式简单校验方法
Jan 03 Javascript
vue 点击按钮增加一行的方法
Sep 07 #Javascript
详解使用jest对vue项目进行单元测试
Sep 07 #Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 #Javascript
koa-router源码学习小结
Sep 07 #Javascript
Vue.js实现表格渲染的方法
Sep 07 #Javascript
vue基于element的区间选择组件
Sep 07 #Javascript
vue-cli监听组件加载完成的方法
Sep 07 #Javascript
You might like
php Ajax乱码
2008/04/09 PHP
php 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
JavaScript Archive Network 集合
2007/05/12 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
python正则表达式及使用正则表达式的例子
2018/01/22 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
瀑布模型都有哪些优缺点
2014/06/23 面试题
简单叙述一下MYSQL的优化
2016/05/09 面试题
研究生自荐信
2013/10/09 职场文书
优秀教师的感人事迹
2014/02/04 职场文书
灰雀教学反思
2014/04/28 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书