<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模版语法1</title>
</head>
<body>
<!-- div#app 快捷生成<div id="app"></div> -->
<!-- div.app 快捷生成<div class="app"></div> -->
<div id="app">
<!-- <p v-if="weather=='summer'">今天去看海</p>
<p v-else-if="weather=='rain'">今天在家学习</p>
<p v-else>今天吃火锅</p> -->
<!-- <template v-if="age < 18">
<p>上网</p>
<p>逃学</p>
</template>
<template v-else-if="age >= 18 && age<25">
<p>找工作</p>
<p>健身</p>
</template>
<template v-else="age>25">
<p>工资多少</p>
<p>结婚</p>
</template>
<template v-if="loginType=='username'">
<label for="">用户名</label>
<input type="text" placeholder="用户名1" key='username'>
</template>
<template v-else-if="loginType=='email'">
<label for="">邮箱</label>
<input type="text" placeholder="邮箱" key='email'>
</template>
<button v-on:click="changeLoginType">切换登录类型</button> -->
<!-- <button @click></button> -->
<table>
<tr>
<th>序号</th>
<th>标题</th>
<th>作者</th>
</tr>
<tr v-for="(book,index) in books">
<td>{{index+1}}</td>
<td>{{book.title}}</td>
<td>{{book.author}}</td>
</tr>
</table>
<div v-for="(value,key) in person">
{{key}}: {{value}}
</div>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
data:{
weather: 'rain',
age: 18,
loginType:'email',
books:[
{
'title':'python',
'author': 'guishu'
},
{
'title':'java',
'author': 'xxx1'
},
{
'title':'PHP',
'author': 'xxx2'
},
{
'title':'C++',
'author': 'xxx3'
},
],
person: {
// key value
"username": "ellen",
"age": 19,
"address": "csc"
}
},
methods:{
changeLoginType:function(){
this.loginType = this.loginType=='username'?'email':'username'
}
}
})
</script>
07-27
4124
4124
01-03
11-06
437
437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
