image.png
<!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>Document</title>
</head>
<body>
<div>
<ul id="app">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script>
let data = {}
//vm模擬的是vue的實(shí)例
let vm = {};
let _ul = document.getElementById('app');
let _li = document.getElementsByTagName('li');
for (let i = 0; i < _li.length; i++) {
const element = _li[i];
element.setAttribute('numIndex',(+element.textContent)-1)
data[`msg${i}`] = 'nihao'+i;
if(i % 2 == 0){
element.style.backgroundColor = '#e8afc5'
}else{
element.style.backgroundColor = '#ab96c5'
}
}
_ul.onclick = function(e){
vm[`msg${e.target.getAttribute('numIndex')}`] = '666-' + (Number(e.target.getAttribute('numIndex')) + 1);
}
Object.keys(data).forEach((k,index)=>{
Object.defineProperty(vm,k,{
get(){
_li[index].textContent = data[k];
return data[k];
},
set(value){
data[k] = value;
_li[index].textContent = data[k];
return;
}
})
})
</script>
</body>
</html>
