VUE-如何通过输入样式名称来更改样式 [英] VUE-how to change the style by typing the name of it

问题描述

我试图通过在文本输入中输入数字或任何详细信息来更改样式属性的一部分。但是，我要替换指定以下样式的整个对象。
但是它只允许我仅更改对象的一部分。

I tried to change the part of the style attribute by input the number or any details in the text input. However, I want to replace the entire object specifying the style as below. But it only allows me to change the part of the object only.

我该怎么办？

html

html

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

js

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
  }

}
});

谢谢。

推荐答案

更改此部分：

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

至

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

这篇关于VUE-如何通过输入样式名称来更改样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！