vue學習筆記 基本語法 繫結事件 雙向繫結

2021-10-08 18:49:14 字數 2640 閱讀 1973

if語句

lang

="en"

>

>

charset

="utf-8"

>

>

titletitle

>

head

>

>

>

v-if

="seen=='a'

">

ap>

v-else-if

="seen=='b'

">

bp>

v-else

="seen=='c'

">

cp>

div>

body

>

src=

"">

script

>

>

var vm =

newvue(}

)script

>

html

>

for語句

lang

="en"

>

>

charset

="utf-8"

>

>

titletitle

>

head

>

>

>

v-for

="todo in todos"

>}h2

>

div>

body

>

src=

"">

script

>

>

var vm =

newvue(,

,]}}

)script

>

html

>

lang

="en"

xmlns:v-on

="">

>

charset

="utf-8"

>

>

titletitle

>

head

>

>

>

v-on:click

="chien"

>

chienbutton

>

div>

body

>

src=

"">

script

>

>

var vm =

newvue(,

methods:}}

)script

>

html

>

當資料發生變化的時候,檢視也就發生變化,當檢視發生變化的時候,資料也會跟著同步變化,這也算是vue.js的精髓之處。

我們可以使用使用v-model指令在 < input >、< textarea >、< select >元素上建立雙向資料繫結。

lang

="en"

xmlns:v-model

="">

>

charset

="utf-8"

>

>

titletitle

>

head

>

>

>

輸入的文字:type

="text"

v-model

="message"

>

}

>

type

="radio"

name

="***"

value

="男"

v-model

="chien"

>

男 type

="radio"

name

="***"

value

="女"

v-model

="chien"

>

女 >

性別為:}

p>

下拉框:

v-model

="selected"

>

disabled

>

---請選擇---option

>

>

aoption

>

>

boption

>

>

coption

>

select

>

>

value:}span

>

div>

body

>

src=

"">

script

>

>

var vm =

newvue(,

})script

>

html

>

vue學習筆記(一)vue基本語法1

1 該指令後面不需要跟任何表示式,可以直接使用 2 該指令表示元素和元件只渲染一次,即使元件資料改變了展示出來的頁面中也不會改變 1 有時候,從伺服器中請求的資料是乙個html 此時如果直接用mustache語法直接包裹的話輸出的是 本身。如果希望解析html 的話就需要v html指令 2 使用方...

Vue動態事件繫結

isi 寫了乙個樣式用來繫結 下面看data data 將樣式繫結給資料模型 class div 我們要知道class物件繫結得方式如下 陣列方式 看方式 class msg div 看data data 這裡用第乙個案例的樣式 我們將樣式直接繫結給msg表示式 這裡我們新增乙個為isi2的樣式 i...

vue事件繫結和表單

1 v on click additem 寫在methods裡面,用this定義全域性獲取data裡的資料,this.list,可以簡寫為 click additem 有乙個stop的修改器,可以阻止事件冒泡 2 v on keydown.enter additem 按下enter的時候觸發事件 3...