97 lines
2.7 KiB
HTML
97 lines
2.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>
|
||
<style>
|
||
[v-cloak] {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="app" v-cloak>
|
||
<h2 v-once>{{ text }}</h2>
|
||
<div v-text="message"></div>
|
||
|
||
<ul>
|
||
<li v-for="v,i in news" :key="i" @click="enterInfo(v)">{{ i }} | {{ v.title }}</li>
|
||
</ul>
|
||
|
||
<ul>
|
||
<li v-for="v,k in obj">{{ k }} | {{ v }}</li>
|
||
</ul>
|
||
|
||
<img :src="imgSrc" :alt="text">
|
||
|
||
<div v-if=" type == 0 ">未开vip</div>
|
||
<div v-else-if=" type == 1 ">普通vip</div>
|
||
<div v-else-if=" type == 2 ">超级vip</div>
|
||
<div v-else-if=" type == 3 ">至尊vip</div>
|
||
<div v-else>请登录</div>
|
||
|
||
|
||
<div v-show="isShow">show true</div>
|
||
|
||
<input type="text" placeholder="输入用户名" v-model="userName">
|
||
<button @click="UserLogin">登 录</button>
|
||
|
||
</div>
|
||
</body>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
|
||
<script>
|
||
|
||
// m v vm
|
||
// vue 指令 就是一些特殊的 html 标签属性
|
||
// v-text 没啥用
|
||
// v-html 把内容渲染中html结构
|
||
// v-for 循环数组 & 对象
|
||
// 一定要加 key
|
||
// v-bind 帮变量绑定到标签的属性上
|
||
// 简写 ：
|
||
// v-if 根据条件，来显示隐藏元素（不符合条件的html将被删除）
|
||
// v-show
|
||
// v-model 一般给输入框使用的，来获取输入框用户输入的值
|
||
// v-on
|
||
// 简写 @
|
||
var vm = new Vue({
|
||
el: '.app',
|
||
// 所有的变量都定义在data中（数据的）
|
||
data: {
|
||
text: '我是测试的文字',
|
||
message: `<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">`,
|
||
news: [
|
||
{ id: 1, title: '新闻1' },
|
||
{ id: 2, title: '新闻2' },
|
||
{ id: 3, title: '新闻3' },
|
||
{ id: 4, title: '新闻4' },
|
||
],
|
||
obj: { id: 1, title: '新闻1' },
|
||
imgSrc: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
|
||
type: 0,
|
||
isShow: true,
|
||
userName: ''
|
||
},
|
||
// 存放所有的方法
|
||
methods: {
|
||
UserLogin() {
|
||
console.log("UserLogin: ", this.userName);
|
||
this.test();
|
||
},
|
||
test() {
|
||
console.log("test");
|
||
},
|
||
enterInfo(v) {
|
||
console.log(v);
|
||
}
|
||
}
|
||
|
||
})
|
||
|
||
</script>
|
||
|
||
</html> |