<!DOCTYPE html
>
<
html
>
<
head
>
<
meta
charset=
"utf-8"
>
<
meta
name=
"viewport"
content=
"width=device-width,initial-scale=1.0"
>
<
title
>vue-demo
</
title
>
</
head
>
<
body
>
<
div
id=
"app"
>
<
p
> {{title}}
</
p
>
<
p
v-if=
'showSub'
> {{subTitle}}
</
p
>
<
div
>
<
input
type=
"text"
v-model=
"mytodo"
>
<
button @
click=
'handleClick'
>添加，修改
</
button
>
</
div
>
<
ul
>
<
li
v-for=
'todo in todos'
>{{todo}}
</
li
>
</
ul
>
</
div
>
<!-- built files will be auto injected -->
</
body
>
</
html
>
上面是index.html
用 v-model 指令在表单控件元素上创建双向数据绑定，v-model 会根据控件类型自动选取正确的方法来更新元素。
简单地说：当在输入框输入“你好”时，在main.js 文件里面的mytodo的值就变成了：’你好‘。
当我点击添加修改按钮的时候，通过事件绑定，执行main.js 文件里面的 handleClick ()方法，
通过： this.todos.push(this.mytodo);
向
todos:[
'吃饭',
'睡觉',
'写代码'
]
添加“你好”。
通过
<
ul
>
<
li
v-for=
'todo in todos'
>{{todo}}
</
li
>
</
ul
>
渲染出来。
然后又通过this.mytodo = '';
使得输入框变为空。
下面看main.js
new
Vue({
el:
"#app",
data:{
title:
'hello vuejs',
subTitle:
'Vue React Angular is good',
showSub:
true,
mytodo:
'',
todos:[
'吃饭',
'睡觉',
'写代码'
]
},
methods:{
handleClick(){
// push() 添加方法
this.
todos.
push(
this.
mytodo);
this.
mytodo
=
'';
this.title
=
'您好，小程序';
}
}
}
)
运行截图：
