Vue.js 绑定响应式样式对象 px 参数

Question

我正在尝试从范围输入中对样式 HTML 元素进行响应式更改，但是 px[=18= 样式参数字体大小、高度、宽度等存在问题]

<span v-bind:style="myobj.css">Hi all</span> var vm = new Vue({ el: '#app', data: { myobj: { css: { color: '#999999', fontSize: '18', } } } }) <input v-model="myobj.css.fontSize" type="range" min="10" max="32" step="1">

但需要 - “字体大小：18px，我该怎么做？我尝试使用过滤器，但不适用于 obj

Answer 1

您可以为您的 v 模型使用计算的属性：

computed: {
  fontSize: {
    get() {
      const fontPx = /(<?value>\d+(?:\.\d+)?)px/

      if (!fontPx.test(newValue))
        return 0
      
      const { groups: { value } } = newValue.match(fontPx)
      return value
    },
    set(newValue) {
      this.myobj.css.fontsize = newValue + 'px'
    }
  }
}

并在您的模板中：

<input v-model="fontSize" type="range" min="10" max="32" step="1">

编辑 - 我刚刚重新阅读了您的问题。我让 get 和 set 翻转过来。编辑后的答案应该可以满足您的需要。

或者，您可以使用经过计算的属性作为样式：

computed: {
  style() {
    const style = { ...this.myobj.css }
    style.fontsize = style.fontsize + 'px'
    
    return style
  }
}

<span v-bind:style="style">Hi all</span>

Vue.js 绑定响应式样式对象 px 参数

Vue.js bind reactive style object px params

styles

bind

vue.js