vue模板字符串写法

1、模板字符串拼接id

<div class="thumbnail" :id="`ctrol_${item.id}`">
    <i :class="'icon iconfont ' + item.icon"></i>
</div>

效果

id="ctrol_1"

<div :style="{width: `${data.width}px`,height:`${data.height}px`,background:`red`}">
        <canvas
            ref="canvas"
            class="elem-container"
            :width="canvasWidth"
            :height="canvasHeight"
            :style="assignStyle"
        />
  </div>

模板字符串2

<div :style="'left:'+myOptions.getPosition()+'px;top:'+myOptions.getPosition()+'px'">

</div>

 

<el-input 
      v-model="input" 
      placeholder="请输入内容"
      :style="`width:${myOptions.width}${unit};height:${myOptions.height}${unit};`">
</el-input>