当前位置:主页 > 网页前端 > vue >

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

时间:2021-01-25 10:28:07 | 栏目:vue | 点击:

如下所示:

<!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>

您可能感兴趣的文章:

相关文章