92 lines
2.2 KiB
HTML
92 lines
2.2 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>Vue 指令</title>
|
||
<script src="https://vuejs.org/js/vue.js"></script>
|
||
</head>
|
||
<body>
|
||
|
||
|
||
<div id="app">
|
||
{{ message }}
|
||
<a :href="address" target="_blank">百度</a>
|
||
<img :src="vueLogo" :alt="message">
|
||
<button v-on:click="clickMore">点我</button>
|
||
<p v-html="h2">
|
||
</p>
|
||
|
||
<input @input="clickTwo" v-model="UserInfo.UserName" type="text" placeholder="请输入账户名">
|
||
|
||
|
||
<p v-if="showStatus">未登录</p>
|
||
<p v-else>已经登录</p>
|
||
<button @click="changeLoginStatus">切换登录状态</button>
|
||
|
||
<p v-for="(a,index) in list" :class="index == 0 ? 'hello' : '' "> {{a}} | {{ index }}</p>
|
||
|
||
</div>
|
||
|
||
|
||
<script>
|
||
/**
|
||
*
|
||
* v-bind: 把莫个变量绑定到标签的莫个属性上
|
||
* 简写 ":"
|
||
*
|
||
* v-on: 为莫个标签绑定事件
|
||
* 简写：@
|
||
*
|
||
* v-html： 把字符串解析成html渲染到页面上，类似 innerhtml
|
||
*
|
||
* v-model: 专门用来获取存放输入框里面用户输入的数据
|
||
*
|
||
* v-if : 条件判断，根据条件的真和假决定显示还是隐藏元素
|
||
* v-else
|
||
*
|
||
* v-if
|
||
*
|
||
* v-else-if
|
||
* v-else-if
|
||
* v-else
|
||
*
|
||
* v-for 专门用来变量数组渲染页面的
|
||
*
|
||
*/
|
||
new Vue({
|
||
el: "#app",
|
||
data: {
|
||
message: '你好我是Vue',
|
||
address: 'http://www.baidu.com',
|
||
vueLogo: 'https://cn.vuejs.org/images/logo.png',
|
||
h2: "<h2>我是h2标签</h2>",
|
||
UserInfo: {
|
||
UserName: null
|
||
},
|
||
showStatus: true,
|
||
list: [
|
||
4,5,7,2,4,7
|
||
]
|
||
},
|
||
// Vue开发中基本上所有的事件处理函数都放在 methods: {} 里面
|
||
methods: {
|
||
clickMore() {
|
||
alert(this.message)
|
||
//this.clickTwo()
|
||
},
|
||
|
||
clickTwo() {
|
||
console.log(this.UserName)
|
||
},
|
||
changeLoginStatus() {
|
||
this.showStatus = !this.showStatus
|
||
}
|
||
},
|
||
});
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html> |