122 lines
2.9 KiB
HTML
122 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>Vue 学习</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||
<style>
|
||
.active {
|
||
color: red;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="dd">
|
||
<h2>{{text}}</h2>
|
||
<a :href="href" :title="text">{{text}}</a>
|
||
<p v-text="test"></p>
|
||
|
||
<ul>
|
||
<li @click="testa(v.title)" v-for="v,i in list">
|
||
下标：{{i}} ： {{ v.title }}
|
||
</li>
|
||
</ul>
|
||
|
||
<ul>
|
||
<li v-for="v, k,index in obj">
|
||
index: {{index}} v: {{v}} k: {{k}}
|
||
</li>
|
||
</ul>
|
||
|
||
<p v-if="isShow">v-if 登录过 可以看</p>
|
||
<p v-else>没登录过 不能看</p>
|
||
|
||
|
||
<!-- <div v-if="type === 'A'">
|
||
A
|
||
</div>
|
||
<div v-else-if="type === 'B'">
|
||
B
|
||
</div>
|
||
<div v-else-if="type === 'C'">
|
||
C
|
||
</div>
|
||
<div v-else>
|
||
Not A/B/C
|
||
</div> -->
|
||
<p v-show="showH">v-show</p>
|
||
|
||
<a href="" @click.prevent="testAlert">点我弹窗</a>
|
||
|
||
<div @click="f1(3)" style="width: 100px;height: 100px;background-color: aqua;">
|
||
<div @click.stop="c1" style="width: 50px;height: 50px;background-color: red;">
|
||
www
|
||
</div>
|
||
</div>
|
||
|
||
<input type="text" v-model="inputModel">
|
||
|
||
{{ inputModel }}
|
||
|
||
|
||
<span v-pre>{{ inputModel }}</span>
|
||
|
||
<div :class="{ active: false }">哈哈哈</div>
|
||
|
||
</div>
|
||
|
||
</body>
|
||
|
||
<script>
|
||
// 数据双向绑定
|
||
// vue的指令 vue自定义的一些html标签上的 属性
|
||
// v-bind 作用将变量绑定到标签的属性上 简写 :
|
||
// v-text
|
||
// v-html
|
||
// v-for
|
||
// v-if 如果为false 会将，dom删除，true 重新添加 数据量小的情况下
|
||
// v-show 数据量大的时候进行显示隐藏
|
||
// v-on 绑定事件 @
|
||
// v-model 给input用的
|
||
var vm = new Vue({
|
||
el: '.dd',
|
||
// 变量的定义，必须放到data内部
|
||
data: {
|
||
text: '哈哈哈哈',
|
||
href: 'http://www.baidu.com',
|
||
showH: false,
|
||
inputModel: 'inputModel',
|
||
list: [
|
||
{ id: 1,title: '测试1' },
|
||
{ id: 2,title: '测试2' },
|
||
{ id: 3,title: '测试3' },
|
||
],
|
||
isShow: false,
|
||
obj: {
|
||
name: 'lb',
|
||
age: 18,
|
||
id: 1
|
||
},
|
||
test: '<h2>v-text</h2>'
|
||
},
|
||
// 专门放方法
|
||
methods: {
|
||
testa(ti) {
|
||
alert(ti)
|
||
},
|
||
f1(name) {
|
||
alert("f1: "+name)
|
||
},
|
||
c1() {
|
||
alert("c1")
|
||
},
|
||
testAlert() {
|
||
alert("哈哈哈哈")
|
||
}
|
||
}
|
||
})
|
||
|
||
</script>
|
||
</html> |