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)文章
Vue3?＜script?setup?lang=“ts“＞?的基本使用
<script setup>?是在單文件組件 (SFC) 中使用?composition api?的編譯時語法糖，本文主要講解<script setup>?與?TypeScript?的基本使用，感興趣的朋友跟隨小編一起看看吧2022-12-12
這篇文章主要介紹了vue 驗證兩次輸入的密碼是否一致的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
Vue3+Vue Router實現(xiàn)動態(tài)路由導(dǎo)航的示例代碼
隨著單頁面應(yīng)用程序(SPA)的日益流行,前端開發(fā)逐漸向復(fù)雜且交互性強的方向發(fā)展,在這個過程中,Vue.js及其生態(tài)圈的工具（如Vue Router）為我們提供了強大的支持,本文將介紹如何在Vue 3中使用Vue Router實現(xiàn)動態(tài)路由導(dǎo)航,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了Vue實現(xiàn)Layui的集成方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue?提供了雙向數(shù)據(jù)綁定機制,使得開發(fā)者可以輕松地將表單組件的值與?Vue?實例中的數(shù)據(jù)進行關(guān)聯(lián),本文將詳細介紹如何在?Vue?中使用這些表單組件,并實現(xiàn)雙向數(shù)據(jù)綁定,需要的可以參考下2024-03-03
這篇文章主要介紹了Vue 引入AMap高德地圖的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue如何實現(xiàn)未登錄不能訪問某些頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue組件跨層級獲取組件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
在 Vue Router 中,你可以使用滾動行為來定義路由切換時頁面滾動的行為,本文就詳細的介紹一下Vue-Router滾動行為的具體使用,感興趣的可以了解一下2023-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡易計時器組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08