<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"
xmlns:v-modle="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns: xmlns: xmlns:
xmlns:>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- @ 是点击事件
： 是绑定数据
v-model：是双向绑定，用于数据回显
watch: 页面监听器
v-if : 显示或者销毁标签
v-show: 隐藏或者显示标签
:key : 增加列表的渲染
index ：如果不对列表做排序没有问题，如果频繁的对列表做排序用index 会有问题
-->
<div id="root">
<div @click="handler">{{content}}</div>
<div :title="title"> 今天星期几</div>
<input v-model="content"/>
<div/>
姓：<input v-model="firstName"/>
名：<input v-model="lastName"/>
<div>{{fullName}}</div>
<div>{{count}}</div>
<div v-show="show">{{content}}</div>
<button @click="handleToggle">toggle</button>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
<input v-model="todolist"/>
<button @click="submit">提交</button>
<ul>
<li v-for="(item2,index) of list2" :key="index">{{item2}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
content: "哈哈哈",
title: "今天不走了",
firstName:"",
lastName:"",
count:0,
show:true,
list:[1,2,3],
todolist: "",
list2:[]
},
methods: {
handler:function () {
this.content="不说话了吧"
},
handleToggle:function () {
this.show=!this.show
},
submit: function () {
this.list2.push(this.todolist)
this.todolist=""
}
},
computed:{
fullName: function () {
return this.firstName+" "+this.lastName
}
},
watch: {
fullName: function () {
this.count++
}
}
})
</script>
</body>
</html>
