Vue练习十一：02_05_函数传参改变Div任意属性的值

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',
        width:'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>