56 lines
1.7 KiB
HTML
56 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>vue练习</title>
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<h2>{{message}}</h2>
|
|
<a v-bind:href="aParams.href">{{aParams.title}}</a>
|
|
<ul>
|
|
<li v-for="v,i in newsList" :key="i">{{i}} |{{v.title}}</li>
|
|
</ul>
|
|
|
|
<div v-if="vip == 0">普通</div>
|
|
<div v-else-if="vip == 1">会员</div>
|
|
<div v-else>超级会员</div>
|
|
|
|
<input v-model="userName" type="text" placeholder="输入用户名">
|
|
<input v-model="userPwd" type="password" placeholder="输入密码">
|
|
<button @click="Login" >登录</button>
|
|
</div>
|
|
</body>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
|
|
<script>
|
|
var vm = new Vue({
|
|
el:'.app',
|
|
data:{
|
|
message: '我的第一次vue',
|
|
vip: 2,
|
|
userPwd: '',
|
|
userName: '',
|
|
aParams: {
|
|
title: '点击我',
|
|
href: 'https://www.baidu.com/'
|
|
},
|
|
newsList: [
|
|
{ id: 1, title: '新闻1', content: '<h2>你好1</h2>' },
|
|
{ id: 2, title: '新闻3', content: '<h2>你好2</h2>' },
|
|
{ id: 3, title: '新闻4', content: '<h2>你好3</h2>' }
|
|
]
|
|
},
|
|
methods: {
|
|
Login() {
|
|
console.log("登录");
|
|
// console.log("用户登录:", this.userPwd, this.userName);
|
|
},
|
|
test() {
|
|
console.log("test");
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
</html> |