vue.js 實現(xiàn)點擊按鈕動態(tài)添加li的方法

更新時間：2018年09月07日 10:24:57 作者：小短腿奔跑吧

今天小編就為大家分享一篇vue.js 實現(xiàn)點擊按鈕動態(tài)添加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 實現(xiàn)點擊按鈕動態(tài)添加li的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue中的directive指令快速使用
這篇文章主要介紹了Vue中的directive指令快速使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue data變量相互賦值后被實時同步的解決步驟
這篇文章主要介紹了vue data變量相互賦值后被實時同步的解決步驟，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue在使用ECharts時的異步更新和數(shù)據(jù)加載詳解
這篇文章主要給大家介紹了關(guān)于vue在使用ECharts時的異步更新和數(shù)據(jù)加載的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。
2017-11-11
一篇文章帶你吃透Vue生命周期(結(jié)合案例通俗易懂)
這篇文章主要給大家介紹了關(guān)于如何通過一篇文章帶你吃透Vue生命周期，文章通過結(jié)合案例更加的通俗易懂,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2022-02-02
詳解Vue 非父子組件通信方法（非Vuex）
本篇文章主要介紹了詳解Vue 非父子組件通信方法（非Vuex），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
vue異步加載dom元素之后無法獲得的解決
這篇文章主要介紹了vue異步加載dom元素之后無法獲得的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue.js實現(xiàn)條件渲染的實例代碼
這篇文章主要介紹了vue.js實現(xiàn)條件渲染的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
Vue Echarts實現(xiàn)圖表的動態(tài)適配以及如何優(yōu)化
這篇文章主要介紹了Vue Echarts實現(xiàn)圖表的動態(tài)適配以及如何優(yōu)化，在實際的前端開發(fā)過程中，動態(tài)適配是一個非常重要的問題，在數(shù)據(jù)可視化的場景下，圖表的動態(tài)適配尤為重要，需要的朋友可以參考下
2023-05-05
Vee-validate 父組件獲取子組件表單校驗結(jié)果的實例代碼
vee-validate 是為 Vue.js 量身打造的表單校驗框架，允許您校驗輸入的內(nèi)容并顯示對應的錯誤提示信息。這篇文章主要介紹了Vee-validate 父組件獲取子組件表單校驗結(jié)果 ,需要的朋友可以參考下
2019-05-05
nuxt.js服務端渲染中axios和proxy代理的配置操作
這篇文章主要介紹了nuxt.js服務端渲染中axios和proxy代理的配置操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11