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...