94 lines
2.7 KiB
HTML
94 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>Document</title>
|
||
<style>
|
||
[v-cloak] {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="app" v-cloak>
|
||
<h2>{{ hello }}</h2>
|
||
<ul>
|
||
<li v-for="(item,index) in list" @click="EnterInfo(item)">
|
||
{{ index }} | {{ item.title }}
|
||
</li>
|
||
</ul>
|
||
|
||
<img :src="src" alt="">
|
||
|
||
<ul>
|
||
<li v-for="(value,key) in obj">{{ key }} | {{ value }}</li>
|
||
</ul>
|
||
|
||
<div v-text="content"></div>
|
||
<div v-html="content"></div>
|
||
|
||
<div v-show="isShow" v-once>v-show 购物车有数据</div>
|
||
|
||
<div v-if="vip == 0">普通用户</div>
|
||
<div v-else-if="vip == 1">VIP1</div>
|
||
<div v-else-if="vip == 2">VIP2</div>
|
||
<div v-else-if="vip == 3">VIP3</div>
|
||
<div v-else>错误</div>
|
||
|
||
<div v-if="isShow">购物车有数据</div>
|
||
<div v-else>购物车没有数据</div>
|
||
|
||
<input type="text" placeholder="请输入用户名" v-model="userName" />
|
||
<input type="password" placeholder="请输入密码" v-model="userPwd" />
|
||
<button @click="Login">登 录</button>
|
||
|
||
</div>
|
||
</body>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
||
<script>
|
||
// vue 指令（html属性）
|
||
// v-for 循环显示数据 key 必须要加
|
||
// v-bind 将变量绑定到标签的属性上 简写 :
|
||
// v-on 绑定点击事件 v-on:事件类型="事件处理函数" 简写：@
|
||
// v-html
|
||
// v-show 是使用display:none 来控制元素显示隐藏
|
||
// v-if v-else v-if-else 会把不符合条件的html直接删除
|
||
// v-model 只能用在输入框上，获取输入框的数值的
|
||
var vm = new Vue({
|
||
el: '.app',
|
||
data: {
|
||
userName: "",
|
||
userPwd: "",
|
||
vip: 1,
|
||
isShow: true,
|
||
hello: '你好这是测试',
|
||
src: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
|
||
list: [
|
||
{ id: 1, title: '新闻1' },
|
||
{ id: 2, title: '新闻2' },
|
||
{ id: 3, title: '新闻3' },
|
||
],
|
||
content: "<h2>测试v-html</h2>",
|
||
obj: {
|
||
age: 18,
|
||
name: '刘兵'
|
||
}
|
||
},
|
||
methods: {
|
||
Login() {
|
||
console.log(this.userName);
|
||
console.log(this.userPwd);
|
||
},
|
||
EnterInfo(item) {
|
||
console.log(item);
|
||
}
|
||
}
|
||
})
|
||
|
||
</script>
|
||
|
||
</html> |