当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue.js 实现点击按钮动态添加li的方法

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

2018年09月23日  | 移动技术网IT编程  | 我要评论

sumproduct,大马猴,中国石化最新油价

如下所示：

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网