|
文件分为html文件和js文件下面贴出代码块：
html文件：
<!DOCTYPE html>
<html lang="en">?
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if/v-show</title>
<style>
* {
padding: 0;
margin: 0;
}
html,body {
font-size: 0;
}
.box-wrapper {
width: 800px;
height: 200px;
}
.box {
float: left;
width: 200px;
height: 200px;
line-height: 200px;
color: #fff;
text-align: center;
font-size: 40px;
}
.box1 {
background-color: red;
}
.box2 {
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<div class="box-wrapper">
<div class="box box1" v-if="boxShow1">box 1</div>
<div class="box box2" v-show="boxShow2">box 2</div>
</div>
<button @click="showBox1">box 1</button>
<button @click="showBox2">box 2</button>
</div>
<script src="index.js"></script>
<script>
var vm = new MyVue({
el: '#app',
data: {
boxShow1: false,
boxShow2: false
},
methods: {
showBox1() {
this.boxShow1 = !this.boxShow1
},
showBox2() {
this.boxShow2 = !this.boxShow2
}
},
})
</script>
</body>
</html>
js文件：
class MyVue {
constructor(options) {
let { el, data, methods } = options;
this.el = document.querySelector(el)
this._data = data;
this.methods = methods;
this.showPools = new Map()
this.eventPools = new Map()
this.init()
}
init() {
this.initData()
this.initDom(this.el)
this.initView(this.showPools)
this.initEvent(this.eventPools)
}
initData() {
let _this = this;
for (let key in _this._data) {
Object.defineProperty(_this, key, {
get() {
return _this._data[key]
},
set(newValue) {
_this._data[key] = newValue
_this.changeDom(key, this.showPools)
}
})
}
}
initDom(el) {
const _childNodes = el.childNodes;
let _this = this
if (!_childNodes.length) {
return
}
_childNodes.forEach(child => {
if (child.nodeType === 1) {
const vIf = child.getAttribute('v-if')
const vShow = child.getAttribute('v-show')
const vEvent = child.getAttribute('@click')
if (vIf) {
_this.showPools.set(child, {
type: 'if',
key: vIf,
value: _this[vIf]
})
}
if (vShow) {
_this.showPools.set(child, {
type: 'show',
key: vShow,
value: _this[vShow]
})
}
if (vEvent) {
_this.eventPools.set(child, _this.methods[vEvent])
}
this.initDom(child)
}
})
}
initView(showPools) {
this.changeDom(null, showPools)
}
initEvent(eventPools) {
for (let [k, v] of eventPools) {
k.addEventListener('click', v.bind(this), false)
}
}
changeDom(key, showPools) {
if (!key) {
for (let [k, v] of showPools) {
switch (v.type) {
case 'if':
v.comment = document.createComment('v-if')
!v.value && k.parentNode.replaceChild(v.comment, k)
break;
case 'show':
!v.value && (k.style.display = 'none')
break;
default:
break;
}
}
} else {
for (let [k, v] of showPools) {
if (v.key === key) {
switch (v.type) {
case 'if':
v.value
? k.parentNode.replaceChild(v.comment, k)
: v.comment.parentNode.replaceChild(k, v.comment)
v.value = !v.value
break;
case 'show':
!v.value
? k.style.display = 'block'
: k.style.display = 'none'
v.value = !v.value
break;
default:
break;
}
}
}
}
}
}?
```javascript
|