vue中簡單小例子 Table動態增刪

2021-10-24 08:44:59 字數 2302 閱讀 4954

要實現的目標1.按增加按鈕能能往store.js.state.people增加乙個物件

2.按減少按鈕能能往store.js.state.people減少乙個物件

3.每次增加或者減少都能實時的表現在**上

初始狀態:

增加乙個物件以後:

減少乙個物件以後:

介紹一下:

store.store.js裡面是全域性存放的資料

drawtable.js 用來生成**

npm install jquery

npm install vuex

="body"

>

this is a table-test vue<

/p>

"display: flex;"

>

"text" value=

"id" id=

"idd"

>

"text" value=

"name" id=

"namee"

>

"btnhandler"

>增加按我<

/button>

"btnhandler02"

>減少按我<

/button>

<

/div>

<

/p>

id<

/th>

name<

/th>

<

/thead>

="data-show"

>

<

!-- 展示資料 --

>

<

/tbody>

<

/table>

<

/div>

<

/template>

import $ from

'jquery'

import

from

'./components/drawtable.js'

import

from

'vuex'

export

default

,mounted()

,created()

, methods:

this

.addpeople

(obj)

;// console.log($('#idd').val());},

btnhandler02()

},//watch監聽people是否發生變化

//要注意這裡people沒有this.people而下面需要show(this.people)搞不懂有點

watch:}}

<

/script>

.body

.body table

.body table th,

.body table td

<

/style>

import vue from

'vue'

;import vuex from

'vuex'

;vue.

use(vuex)

;export

default

newvuex.store(,

]},//存放對state修改的方法

mutations:

,deletepeople

(state)},

actions:

, getters:

})

import $ from

'jquery'

function

show

(people)

}//要注意方法需要匯出

export

vue 封裝元件 (例子table元件)

建立元件的模板,先把架子搭起來,寫寫樣式,考慮好元件的基本邏輯。準備好元件的資料輸入。即分析好邏輯,定好 props 裡面的資料 型別。準備好元件的資料輸出。即根據元件邏輯,做好要暴露出來的方法。封裝完畢了,直接呼叫即可。1.父元件與子元件傳值 父元件傳給子元件 子元件通過props方法接受資料 子...

Lua中table裡內嵌table的例子

廢話www.cppcns.com不多少,看代程式設計客棧碼 複製 如下 local temp insert table data local temp insert table n程式設計客棧bsp temp insert table data temp insert table data,temp...

vue中簡單的小插曲

我們現在來學習一下vue中一些簡單的小東西 首先我們必須要引入vue.js檔案哦!1.有關文字框裡的checkbox js new vue html checkbox v model mag 這樣checked的屬性值就可以顯示到頁面上了,我們可以利用它寫顯示隱藏的小案例。2.vue中的迴圈遍歷 j...