124 lines
2.8 KiB
HTML
124 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<title>Document</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
|
||
<style>
|
||
.on {
|
||
color: red;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
|
||
<div class="lb">
|
||
|
||
<h2> {{ hello }} </h2>
|
||
|
||
<a :href="baidu"> {{ hello }} </a>
|
||
|
||
<img :src="img" alt="">
|
||
|
||
<p v-html="texts">
|
||
</p>
|
||
|
||
<input v-model="UserName" type="text" placeholder="用户名字">
|
||
<button @click="getUserName">提交</button>
|
||
|
||
|
||
<ul>
|
||
<li v-for="(item,index) in list" :class=" index == 0 ? 'on' : '' "> {{ index }} | {{ item.title }} </li>
|
||
</ul>
|
||
|
||
|
||
|
||
<p v-if="showLogin == 1"> 今天天气不错1</p>
|
||
<p v-else-if="showLogin == 2">没有登录2</p>
|
||
<p v-else-if="showLogin == 3 ">没有登录3</p>
|
||
<p v-else=>没有登录4</p>
|
||
|
||
|
||
<p v-show="showLogin == 2">v-show 2</p>
|
||
|
||
|
||
<h2>{{ getname }}</h2>
|
||
<!-- <div>
|
||
<slot name="header"></slot>
|
||
</div>
|
||
|
||
|
||
<h1 slot="header">Here might be a page title</h1> -->
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<script>
|
||
// vue 指令
|
||
// v-bind: 帮变量绑定到 标签的属性上
|
||
// 简写 ” : “
|
||
// v-html : 将变量里面的html渲染到页面
|
||
// v-text: ....
|
||
// v-model 获取输入框的的内容实时存放到变量里面
|
||
// v-on: 为标签绑定事件(点击事件，悬浮事件...)
|
||
// 简写：@
|
||
// v-for 渲染数组到页面
|
||
// v-if v-else 根据条件决定是否显示元素
|
||
// 元素不符合条件的时候，会把元素从html里面删除
|
||
// v-show 和v-if 类似，但是只是把不符合条件的元素隐藏起来 none
|
||
|
||
var vm = new Vue({
|
||
el: ".lb",// view
|
||
data: { // model
|
||
message: "测试哦",
|
||
hello: "defdewfew ",
|
||
baidu: 'http://www.baidu.com',
|
||
img: 'https://images.gitee.com/uploads/images/2018/1226/113456_cd3d317c_1305863.png',
|
||
texts: '<h2>我是h2</h2>',
|
||
UserName: null,
|
||
list: [
|
||
{ id: 1, title: '哈哈哈' },
|
||
{ id: 2, title: '顶顶顶顶' }
|
||
],
|
||
watchData: null,
|
||
showLogin: 3
|
||
},
|
||
watch: {
|
||
watchData(newVal,oldVal) {
|
||
console.log("newVal: ",newVal)
|
||
console.log("oldVal: ",oldVal)
|
||
|
||
}
|
||
},
|
||
computed: {
|
||
getname () {
|
||
return this.UserName
|
||
}
|
||
},
|
||
// 所有的方法必须放到 methods
|
||
methods: {
|
||
getUserName () {
|
||
console.log("用户输入的：",this.UserName)
|
||
this.setUserName()
|
||
|
||
},
|
||
setUserName() {
|
||
this.UserName = "刘兵"
|
||
console.log("setUserName: ", this.UserName)
|
||
}
|
||
}
|
||
});
|
||
|
||
|
||
|
||
</script>
|
||
|
||
|
||
</body>
|
||
</html> |