Demo 在线地址:
https://sx00xs.github.io/test/11/index.html
---------------------------------------------------------------
ide: vscode
文件格式:.vue
解析:(待补)
<template> <div id="app"> <div class="outer"> <p> <label>属性名:</label> <input type="text" v-model="attr"> </p> <p> <label>属性值:</label> <input type="text" v-model="val"> </p> <p> <label></label> <button @click="handleActive">确定</button> <button @click="handleReset">重置</button> </p> </div> <div :style="[baseStyles, overridingStyles]">在上方输入框输入"属性名"及"属性值",点击确定按钮查看效果。</div> </div> </template> <script> export default { data:function(){ return{ attr:'background', val:'blue', isActive:false, baseStyles:{ color:'#fff', '180px', height:'180px', background:'#000', margin:'0 auto', padding:'10px', } } }, computed:{ overridingStyles(){ var newAttr={}; if(this.isActive){ newAttr[this.attr]=this.val; } return newAttr; } }, methods:{ handleActive(){ this.isActive=true; }, handleReset(){ this.isActive=false } } } </script>