vue實戰學習教程1 監聽 樣式繫結 篩選過濾排序

2021-10-17 02:14:22 字數 2233 閱讀 4690

vue中計算、監聽、樣式繫結、style、篩選、過濾、排序等,歸納總結了一下。

>

>

.bgblue

.bgyellow

style

>

head

>

>

"myvue"

>

>

v-for

='(s,index) in students'

>

} - } - }

@click

="deletestudensindex(index)"

>

刪除button

>

@click

="updetastudensindex(index,)"

>

更新button

>

li>

ul>

@click

='neworder(1)'

>

降序button

>

@click

='neworder(0)'

>

公升序button

>

>

v-for

='(s,index) in querystudentsbyname'

>

} - } - }

@click

="deletestudensindex(index)"

>

刪除button

>

@click

="updetastudensindex(index,)"

>

更新button

>

li>

ul>

使用者名稱:type

="text"

v-model

="username"

>

年齡:type

="text"

v-model

="age"

>

v-on:click

="info(1)"

>

顯示button

>

v-model

="myclick"

>

v-bind:href

="src"

>

>

>

顯示:},}h2

>

:class

="style1"

>

這裡有一行文字h1

>

@click

="chargebg"

>

變色button

>

div>

src=

"js/vue.js"

>

script

>

>

var myvue=

newvue(,

,,],

queryname:

's'//篩選},

methods:

,chargebg()

,deletestudensindex

(index)

,updetastudensindex

(index,stu)

,neworder

(chargeorder)},

computed:

,querystudentsbyname()

=this

;//取到篩選陣列、條件、排序方式

newstudents=students.

filter

(stu=> stu.name.

indexof

(queryname)

>-1

);//按照刷選條件 查詢出新陣列

newstudents.

sort

(function

(s1,s2)

else})

return newstudents;}}

,//資料監聽 v->m html->data

// watch:

// }})

;//資料監聽方法二

myvue.

$watch

("username"

,function

(value)

)script

>

body

>

vue實戰學習教程3 表單輸入繫結

給後台傳值不用乙個個繫結input元素傳送,可以一次性搞定 form 表單輸入與傳值title head myvue action 1.html submit.prevent mysubmit 使用者名稱 type text value v model user.username 密碼 type p...

學習不一樣的vue實戰 1 環境搭建

因為個人的喜好和工作的需要,一直想寫這樣的系列教程,今天如願以償,但是我是第一次寫,有什麼錯誤,和指教的地方,歡迎吐槽,謝謝 一般來講,可以用以下三種方式安裝 node.js 第一步 第二步 第三步 安裝成功後,開啟終端輸入下面的命令。就可以看到自己的node 和npm 安裝好了沒有。linux 使...

Vue學習教程

vue.js 讀音 vju 類似於 view 是一套構建使用者介面的漸進式框架。vue 只關注檢視層,採用自底向上增量開發的設計。vue 的目標是通過盡可能簡單的 api 實現響應的資料繫結和組合的檢視元件。vue 學習起來非常簡單,本教程基於 vue 2.1.8 版本。開始學習 vue.js 安裝...