111 lines
3.0 KiB
HTML
111 lines
3.0 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>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
<style>
|
|
[v-cloak]{
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- view -->
|
|
<div class="test" v-cloak>
|
|
<div v-cloak>
|
|
{{ message }}
|
|
</div>
|
|
|
|
|
|
<p>{{list}}</p>
|
|
<img :src="img" :alt="hello">
|
|
<div v-html="h1"></div>
|
|
|
|
|
|
<p v-show="isVip">只有vip才能看的内容</p>
|
|
|
|
<button @click="HelloTest('11111')">充钱</button>
|
|
|
|
<ul>
|
|
<li v-if="isShow == 1">vip1</li>
|
|
<li v-else-if="isShow == 2 ">vip2</li>
|
|
<li v-else-if="isShow == 3 ">vip3</li>
|
|
<li v-else-if="isShow == 4 ">vip4</li>
|
|
<li v-else-if="isShow == 5 ">vip5</li>
|
|
<li v-else>普通用户</li>
|
|
</ul>
|
|
|
|
<ul>
|
|
<li v-for="(v,i) in list" :key="i">
|
|
{{ i+1 }} : {{ v.name }}
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
<script>
|
|
var vm = new Vue({
|
|
el: '.test',
|
|
// 存放程序运行中定义的所有变量 model
|
|
data: {
|
|
hello: '这是测试文字',
|
|
dd: 'asdasfasf',
|
|
img: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
|
|
list: [
|
|
{ id: 1,name: '哈哈哈1' },
|
|
{ id: 2,name: '哈哈哈2' }
|
|
],
|
|
h1: "<h1>这是h1</h1>",
|
|
isVip: true,
|
|
isShow: 1,
|
|
UserName: '',
|
|
message: 'ewdewde'
|
|
},
|
|
created () {
|
|
|
|
},
|
|
// vue 中所有的方法都在这写
|
|
methods: {
|
|
HelloTest(d) {
|
|
console.log(d);
|
|
this.test2()
|
|
this.isVip = !this.isVip
|
|
},
|
|
test2() {
|
|
console.log("test2");
|
|
}
|
|
},
|
|
watch: {
|
|
message: function(newVal,OldVal) {
|
|
console.log("newVal: ", newVal);
|
|
console.log("OldVal: ", OldVal);
|
|
}
|
|
},
|
|
computed: {
|
|
test2() {
|
|
console.log("test2");
|
|
}
|
|
}
|
|
})
|
|
|
|
// 指令 将数据渲染到页面上的方式
|
|
// v-bind 将变量绑定到标签的属性上 简写 :
|
|
// v-html 渲染html v-text 渲染纯文本
|
|
// v-show 根据一个变量的true flase 决定元素的显示和隐藏，它是对元素设置 display
|
|
// v-if 根据一个变量的true flase 决定元素的显示和隐藏, 它是对元素进行删除来显示隐藏的
|
|
// 实际情况用谁？
|
|
// 他们两个有什么优缺点？
|
|
// v-on:事件类型="方法" @
|
|
// v-model 一般只能用于输入框
|
|
// v-slot 插槽
|
|
// computed 对比methods ，他的计算结果会被缓存起来
|
|
//
|
|
|
|
// computed methods
|
|
</script>
|
|
|
|
</html> |