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