<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue01</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-bind:title="message">
{{content}}
</h1>
<h2 :title="message">
{{content}}
</h2>
<input type="text" v-bind:value="searchMap.keyword"/>
<input type="text" v-model="searchMap.keyword"/>
<p>{{searchMap.keyword}}</p>
<button v-on:click="search()">查询</button>
<button @click="search">查询1</button>
<form action="save" v-on:submit.prevent="onsunmit">
<input type="text" id="name" v-model="user.username"/>
<button type="submit" >保存</button>
</form>
<input type="checkbox" v-model="ok"/> 是否同意加班
<h1 v-if="ok">今天上班</h1>
<h1 v-else>今天不上班</h1>
<ul>
<li v-for="(n,index) in 5">
{{n}}---{{index}}
</li>
</ul>
<ol>
<li v-for="i in 5">
{{i}}
</li>
</ol>
<hr/>
<table border="2">
<tr v-for="user in userList">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.sex}}</td>
</tr>
</table>
</div>
<script>
var vm = new Vue({
el: '#app',
data() {
return {
content: "我是标题" ,
message: "页面加载于 " + new Date().toLocaleString(),
user:{
},
searchMap: {
keyword: "123456"
},
result: {},
ok: true ,
userList:[
{"id":1,"name":"wzq01","age":21,"sex":"female"},
{"id":2,"name":"wzq02","age":22,"sex":"male"},
{"id":3,"name":"wzq03","age":23,"sex":"female"}
]
}
},
created() {
},
computed: {
},
components: {
},
methods: {
search(){
console.log("输出方法")
},
f1(){
console.log("输出分f1")
},
onsunmit(){
if(this.user.username){
console.log("username 有值")
}else{
alert("请输入用户名")
}
}
},
mounted() {
},
watch: {
}
});
</script>
</body>
</html>
效果图