VUE-如何通过键入它的名称来改变风格。

Question

我试图通过在文本输入中输入数字或任何细节来改变样式属性的部分。但是，我想把指定样式的整个对象替换成下面的样子，但它只允许我改变对象的一部分。

我该怎么做呢？

html

  <div>
    <label> Type width</label>
    <input type="text" v-on:keydown.enter= 'defst($event.target.value)'>
    <div :style='stylename'>kkk</div>
  </div>

js

new Vue({
  el: '#exercise',
  data: {

    narrow:{
      backgroundColor:'lemonchiffon',
      width:150+'px'
    },
    medium:{
      backgroundColor:'yellow',
      width:250+'px'
    },
    large:{
      backgroundColor:'organge',
      width: 350+'px'
    },
    xlarge:{
      backgroundColor:'red',
      width: 500 +'px'
    },
    stylename:''

  },
  methods: {

  defst(x){
    console.log(x);
    this.stylename=x
  }

}
});

先谢谢你。

Answer 1

改变这部分。

  defst(x){
    console.log(x);
    this.stylename=x
  }

改为

  defst(x){
    console.log(x);
    this.stylename=this[x]
  }