79 lines
2.3 KiB
HTML
79 lines
2.3 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">
|
|
<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-html="content"></div>
|
|
|
|
|
|
<div v-show="isShow" v-once>购物车有数据</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="isShow">购物车没有数据</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>
|
|
// v-bind 将变量绑定到标签的属性上,简写 :
|
|
var vm = new Vue({
|
|
el:'.app',
|
|
data:{
|
|
userName:"",
|
|
userPwd:"",
|
|
vip:1,
|
|
isShow:true,
|
|
hello:'你好这个是测试',
|
|
src:'https://www.baidu.com/img/PC_69793e3487cd39e10b69d7358be8ca54.gif',
|
|
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> |