87 lines
2.1 KiB
HTML
87 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Title</title>
|
||
<style>
|
||
[v-cloak] {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="main" v-cloak>
|
||
<h2>{{ hello }}</h2>
|
||
<ul v-once>
|
||
<li v-for="(item,index) in list">{{ index }} {{ item.name }}</li>
|
||
</ul>
|
||
|
||
<ul>
|
||
<li v-for="(value,key) in obj">{{ key }} {{ value }}</li>
|
||
</ul>
|
||
|
||
<img :src="img" alt=""/>
|
||
|
||
<p v-if="isLogin == '1' ">1</p>
|
||
<p v-else-if="isLogin == '2'">2</p>
|
||
<p v-else-if="isLogin == '3'">3</p>
|
||
<p v-else>都不满足</p>
|
||
|
||
<h2 v-show="isShow">v-show</h2>
|
||
|
||
<div v-html="content"></div>
|
||
|
||
<input type="text" v-model="userName" placeholder="请输入账户">
|
||
{{userName}}
|
||
|
||
<button @click="test">点我</button>
|
||
</div>
|
||
|
||
</body>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||
<script>
|
||
// vue 指令 就是一堆用在标签上的属性
|
||
// v-for 循环数据到页面上的
|
||
// v-bind 绑定标签的属性 简写 :
|
||
// v-if 根据条件的真假，决定div是显示
|
||
// v-show 根据条件的真假，决定div是显示
|
||
// 差别1：v-if会删除dom元素 v-show 是display 进行隐藏
|
||
// 差别2：v-if不适合用在数据量大的场景，
|
||
// v-html 把html渲染到页面上
|
||
// v-text 把内容渲染到页面上
|
||
// v-model 用在输入框上
|
||
// v-on 绑定事件 @
|
||
// watch 用来实现对 变量的监听
|
||
// computed 用来实现计算缓存的
|
||
var vm = new Vue({
|
||
el: '.main',
|
||
data: {
|
||
hello: '这是第一个vue项目',
|
||
img: 'https://www.baidu.com/img/dong_47f08bb2dd6546c9a788f71d7463ce48.gif',
|
||
isLogin: '5',
|
||
userName: '张三',
|
||
isShow: false,
|
||
content: '<h2>这是测试标题</h2>',
|
||
list: [
|
||
{id:1,name: '哈哈哈1'},
|
||
{id:2,name: '哈哈哈2'},
|
||
{id:3,name: '哈哈哈3'},
|
||
],
|
||
obj: {
|
||
id: 1,
|
||
name: 222
|
||
}
|
||
},
|
||
methods: {
|
||
test() {
|
||
this.test2();
|
||
},
|
||
test2() {
|
||
alert(this.userName)
|
||
}
|
||
}
|
||
});
|
||
|
||
</script>
|
||
</html> |