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

2024-09-28 03:23:38

如下所示：

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

vue2.0中click点击当前li实现动态切换class

1,文件内容 ----//为item添加不存在的属性,需要使用vue提供的Vue.set( object, key, value )方法. 看详解:https://cn.vuejs.org/v2/api/#Vue-set <template> <div> <ul> <li v-for="(item,$index) in items" @click="selectStyle (item, $index) " :class=&
vue.js 实现输入框动态添加功能

代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-demo</title> </head> <body> &
Vue.js实现按钮的动态绑定效果及实现代码

实现效果: 实现代码以及注释: <!DOCTYPE html> <html> <head> <title>按钮绑定</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte
vue.js实现点击后动态添加class及删除同级class的实现代码

最近使用vue需要实现一个点餐选择商品规格的页面,需要通过vue动态的给被点击的元素添加class名字,使其变色,其他的删除class.如图: 开始在网上找了许多办法发现不是太好用,最后找到一个发现还是不错的,记录一下 html: <div class="weui-mask" id="guige"> <div class="guigeBox"> <p class="guigeTitle">{
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="
JS实现点击按钮获取页面高度的方法

本文实例讲述了JS实现点击按钮获取页面高度的方法.分享给大家供大家参考,具体如下: 这是一个JavaScript特效代码,点击获取网页高度,在ie6下实现position-fixed的效果,另外针对遮罩的问题(大概是做lightBox吧),个人觉得纯css法(不包括其显示/隐藏)将更适合. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-btn-web-height-codes/ 具体代码如下: <!DOCTYPE html P
js简单实现表单中点击按钮动态增加输入框数量的方法

本文实例讲述了js简单实现表单中点击按钮动态增加输入框数量的方法.分享给大家供大家参考.具体如下: 这里演示表单中点击按钮动态增加输入框数量的方法,默认是没有输入框,点击按钮之后,输入框会不断的增加,每点击一次,增加一个,觉得挺不错吧,希望对你有所帮助. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-input-button-add-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3
vue点击按钮动态创建与删除组件功能

主要功能需求点: 点击左侧组件库按钮创建对应的不同的组件,并在右侧区域展示点击右侧创建的组件中的删除按钮,删除对应的组件删除对应的组件之后,下方的组件位置自动上移效果图: 代码: 父组件代码(去除了css样式代码): <template> <div class="home"> <div class="container"> <div class="addZujian"> <div>
Vue.js实现点击左右按钮图片切换

本文实例为大家分享了Vue.js实现点击左右按钮图片切换的具体代码,供大家参考,具体内容如下关于图片切换,网上也有很多的说法,这边通过参考给出了如下所示的解决方案效果: html 通过v-for循环展示图片列表itemlist,将图片路径保存在data中的itemlist中,添加上下按钮的点击事件. <template> <div> <div class="zs-adv"> <a title="上一页&qu
JS实现点击按钮自动增加一个单元格的方法

本文实例讲述了JS实现点击按钮自动增加一个单元格的方法.分享给大家供大家参考.具体分析如下: 这是一个网页在线自助生成表格的特效代码. 核心功能代码是JS实现,点击网页中的添加按钮,网页中自动增加一个单元格复制代码代码如下: <HTML> <HEAD> <TITLE>js动态生成表格</TITLE> <META content="text/html; charset=hz-gb-2312" http-equiv=Content-
vue实现权限控制路由(vue-router 动态添加路由)

用户登录后返回权限菜单,前端根据权限菜单动态添加路由,然后再动态生成菜单栏. 思路如下: 一.定义初始化默认路由. 二.动态配置路由,这里是把所有组件中相应的路由配置成一个个的对象,根据后台返回的菜单tree一个个去匹配. 三.通过匹配,把匹配好的路由数据addRoutes到路由中. 四.为了防止刷新页面后路由数据被清空,这里用判断是否登录的方式,再次加载动态路由. 具体代码如下: router.js import Vue from 'vue' import {router} from './i
利用js给datalist或select动态添加option选项的方法

有时需要从配置文件中读取信息,然后添加到用户的选择项中,比如select的option选项,下面针对此类情况做了一个实例内容如下: <!DOCTYPE html> <html> <head> <title>鼠标点击时加载</title> <script type="text/javascript" src="jquery-1.8.3.js"></script> </head&
vue动画之点击按钮往上渐渐显示出来的实例

如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> <style> .box{ h
JS实现点击按钮随机生成可拖动的不同颜色块示例

本文实例讲述了JS实现点击按钮随机生成可拖动的不同颜色块.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

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

相关推荐

随机推荐