104 lines
2.4 KiB
HTML
104 lines
2.4 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>
|
||
.red {
|
||
color: red;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
|
||
<div class="app">
|
||
<h2>{{tips}}</h2>
|
||
<a :href="href">百度</a>
|
||
<!-- <a v-bind:href="href">百度</a> -->
|
||
|
||
<div v-html="html"> </div>
|
||
|
||
<div class="red" v-show="isShow">你好</div>
|
||
|
||
|
||
<h2 v-if="showH2 == 1">1</h2>
|
||
|
||
<h2 v-else-if="showH2 == 2">2</h2>
|
||
|
||
<h2 v-else-if="showH2 == 3">3</h2>
|
||
|
||
<h2 v-else>4</h2>
|
||
|
||
|
||
<ul>
|
||
<li v-for="j,index in NewList"
|
||
@click="changeRed(index)"
|
||
:class="index == currentIndex ? 'red' : '' " >
|
||
{{ index+1 }} : {{ j.title }}
|
||
|
||
|
||
</li>
|
||
|
||
<h2 v-for="j,index in NewList">
|
||
<div v-if="index == currentIndex">
|
||
{{ j.content }}
|
||
</div>
|
||
|
||
</h2>
|
||
|
||
|
||
</ul>
|
||
|
||
<input v-model="UserName" type="text" placeholder="输入用户名">
|
||
|
||
{{ UserName }}
|
||
|
||
<span v-pre>{{ this will not be compiled }}</span>
|
||
|
||
</div>
|
||
|
||
</body>
|
||
<script>
|
||
// jq 对原生js的封装
|
||
// vue m(model) v(view) vm
|
||
// 双向数据绑定
|
||
// 指令
|
||
// v-bind 将data变量绑定到 标签属性上 简写 " : "
|
||
// v-html 将HTML字符串渲染到网页上
|
||
// v-show 将元素显示或者隐藏，display none 实现
|
||
// v-if 将元素显示或者隐藏，条件为false的时候会将dom节点删除
|
||
// v-for
|
||
// v-on: 绑定点击事件 简写 @
|
||
// v-model 数据双向绑定
|
||
|
||
var app = new Vue({
|
||
el: '.app',
|
||
data: { // 放数据的地方
|
||
tips: "这是vue学习",
|
||
href: 'http://www.baidu.com',
|
||
html: '<h2>我是H2</h2>',
|
||
isShow: false,
|
||
showH2: 3,
|
||
currentIndex: 0,
|
||
UserName: '',
|
||
NewList: [
|
||
{ title: '你好1', content: '1' },
|
||
{ title: '你好2', content: '2' },
|
||
{ title: '你好3', content: '3' }
|
||
]
|
||
},
|
||
// 放vue的所有方法
|
||
methods: {
|
||
changeRed(index) {
|
||
this.currentIndex = index
|
||
console.log(index);
|
||
|
||
}
|
||
}
|
||
})
|
||
|
||
</script>
|
||
</html> |