113 lines
2.9 KiB
HTML
113 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
<style>
|
||
.box {
|
||
width: 300px;
|
||
height: 300px;
|
||
background: red;
|
||
}
|
||
[v-cloak] {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="app" v-cloak>
|
||
<h2>{{msg}}</h2>
|
||
<img :src="img" alt="">
|
||
<ul>
|
||
<li v-for="v,index in list " :key="index">{{index}} | {{v.name}}</li>
|
||
</ul>
|
||
|
||
<ul>
|
||
<li v-for="val,key,i in obj" :key="i">{{i}} | {{key}} | {{val}}</li>
|
||
</ul>
|
||
|
||
<h2 v-if="isVip == 1">游客查看内容</h2>
|
||
<h2 v-else-if="isVip == 2">普通vip查看内容</h2>
|
||
<h2 v-else-if="isVip == 3">超级vip查看内容</h2>
|
||
<h2 v-else>错误页面</h2>
|
||
|
||
<h3 v-show="isShow">isShow</h3>
|
||
<div v-html="test"></div>
|
||
<div v-text="test"></div>
|
||
|
||
<button @click="hello('你好')">点我</button>
|
||
|
||
<div class="box" @click="father">
|
||
<button @click.stop.once="child">子元素点击</button>
|
||
</div>
|
||
|
||
<input type="text" v-model="UserName" placeholder="请输入用户名">
|
||
<!-- <p>{{UserName}}</p> -->
|
||
|
||
<span v-once>{{ UserName }}</span>
|
||
</div>
|
||
</body>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||
<script>
|
||
// v-bind 将变量绑定到标签的属性上
|
||
// 简写 ：
|
||
// v-for
|
||
// v-if 会根据条件真假 对元素进行 增删
|
||
// v-show 会根据条件真假 对元素进行display设置
|
||
// v-on @
|
||
var vm = new Vue({
|
||
el: '.app',
|
||
data: {
|
||
test: '<h2>v-html</h2>',
|
||
msg: '这是vue',
|
||
img: 'https://www.baidu.com/img/bd_logo1.png',
|
||
UserName: '1111',
|
||
list: [
|
||
{id:1,name:'测试1'},
|
||
{id:2,name:'测试2'},
|
||
{id:3,name:'测试3'},
|
||
],
|
||
obj: {
|
||
name: '张三',
|
||
age: 18
|
||
},
|
||
isVip: 4,//1游客，2普通vip，3超级vip
|
||
isShow: false,
|
||
},
|
||
methods: {
|
||
father() {
|
||
alert("father")
|
||
},
|
||
child() {
|
||
alert("child")
|
||
},
|
||
hello(name) {
|
||
console.log(this.msg);
|
||
alert(name)
|
||
}
|
||
}
|
||
});
|
||
|
||
// var data = {
|
||
// age: 18,
|
||
// name: '张三'
|
||
// };
|
||
|
||
// document.querySelector("h2").innerText = data.name
|
||
|
||
// Object.defineProperty(data,"name", {
|
||
// get: function() {
|
||
// return "李四";
|
||
// },
|
||
// set: function(newValue) {
|
||
// console.log(newValue);
|
||
// document.querySelector("h2").innerText = newValue
|
||
|
||
// },
|
||
// })
|
||
// console.log(data.name);
|
||
|
||
</script>
|
||
</html> |