Question

首先，了解我的问题和选择：我正在将现有的JS项目翻译成Vue.js框架。

我在jQuery中遇到一个容易解决但在Vue.js中遇到麻烦的问题

在我的代码中，我必须在加载整个页面后生成画布，然后将它们添加到画布容器div中。当我点击一个按钮时，我需要对所有这些画布的CSS进行更改。截图使用document.createElement('canvas')添加到现在。

Vue方式是向画布添加v-bind:style属性并通过在data() vue JS代码中设置变量来更改它，如下所示：<canvas v-bind:style="{width: customWidth}></canvas>"和{{ 1}}。

到目前为止我所理解的是，如果我在以下列方式生成画布时添加<button v-on:click="customWidth++">+</button>属性：v-bind:style，Vue.js将不会意识到它存在，因为它是生成的加载页面后。

我正在寻找有关如何解决问题的建议。

所以，只是为了说明一下：

canvas.setAttribute('v-bind:style', '{width: customWidth}')

应该成为这个：

<div id="canvas-container"><div>
<button v-on:click="customWidth++">+</button>
<button v-on:click="customWidth--">-</button>

在Vue JS代码中使用它：

<div id="canvas-container">
   <canvas v-bind:style="{width: customWidth}"></canvas>
   <canvas v-bind:style="{width: customWidth}"></canvas>
   <canvas v-bind:style="{width: customWidth}"></canvas>
   <canvas v-bind:style="{width: customWidth}"></canvas>
   <canvas v-bind:style="{width: customWidth}"></canvas>
<div>
<button v-on:click="customWidth++">+</button>
<button v-on:click="customWidth--">-</button>

响应按钮

Answer 1

vue＆＃39; ify整个事情并使用v-for创建画布将是理想的但如果这是一个问题，只需使用纯JS

document.querySelector('#canvas-container canvas')

并添加样式。

将Vue.js v-bind：style属性添加到页面加载

1 个答案: