How to dynamically pass parameters and splicing strings of Vue tag attributes

background

The attribute placeholder of the html tag input needs to dynamically pass parameters and splicing fixed strings

There is a problem

We need to assign prompt characters such as "Please enter the length", "Please enter the width", "Please enter the thickness" in the placeholder attribute according to the type of the input value

solution

1. method one

   v-bind: attribute = "'string' + custom variable name", you need to pay attention to the attribute must be ": attribute = "this form will work

   <ul class="menu" v-for="(item,index) in 4">
       <li :class="{
          
          'selected':index===clickIndex}" @click="selected(index)">
           <div>
               <h3>{
        
        {item}}点位标签</h3>
               <span style="margin: 15px 0px;">附近的资产:3个(2个未完成修订)</span><br />
               <img :src="'img/'+(item+nameIndex)+'.jpg'" />
               <a href="#"></a>
           </div>
       </li>
   </ul>
   

2. Method Two

   We can also use the template string syntax to bind an attribute variable to a normal tag

   <span :title="`${drug.itemname} ${drug.itemgg}`">{
        
        { drug.itemname }} {
        
        { drug.itemgg }}</span>
   

3. method three

   Dynamically change the value of the component placeholder. The disadvantage of this is to introduce a new variable.
   Bind the placeholder to a dynamic parameter, as follows:

   :placeholder="vpcPlaceholder"
   

   This dynamic parameter is calculated by a certain condition, so it is most reasonable to write this parameter into computed(), as shown in the following code

   3.1 placeholder dynamic binding

   <el-select v-model="form.vpc" :placeholder="vpcPlaceholder" @change="changeVPC">
       <el-option v-for="item in attrs.vpc" :key="item.value" :label="item.label" :value="item.value">
       </el-option>
   </el-select>
   

   3.2 placeholder text is generated according to conditions

   computed: {
         
         
       vpcPlaceholder() {
         
         
       return this.attrs.vpc.length ? "请选择" : "暂无可用VPC，请先申请"
       }
   }
   

The final proposal

<vxe-table-column title="实际尺寸(mm)" width="15%" class-name="actuel-size">
    <template slot-scope="scope">
      <table border="1" class="border-none">
        <!-- dx的方向的长度 -->
        <tr v-if="scope.row.x">
            <td>{
   
   { scope.row.x.name }}</td>
            <td><input :value="scope.row.x.value" :placeholder="`请输入实际` + `${scope.row.x.name}`" /></td>
        </tr>
        <!-- dy的方向的长度 -->
        <tr v-if="scope.row.y">
            <td>{
   
   { scope.row.y.name }}</td>
            <td><input :value="scope.row.y.value" :placeholder="`请输入实际` + `${scope.row.y.name}`" /></td>
        </tr>
        <!-- dz的方向的长度 -->
        <tr v-if="scope.row.z">
            <td>{
   
   { scope.row.z.name }}</td>
            <td><input :value="scope.row.z.value" :placeholder="`请输入实际` + `${scope.row.z.name}`" /></td>
        </tr>
      </table>
    </template>
</vxe-table-column>

if ([35782656, 35717120, 35848192].includes(retProduct.categoryId)) {
    
    
 // 如果截面类型：石膏线:35782656 踢脚线:35717120 和定制线条:35848192
 retProduct.x = {
    
    
   name: "厚度",
   value: dataProduct.modelInfo.dx
 }
 retProduct.z = {
    
    
   name: "高度",
   value: dataProduct.modelInfo.dz
 }
} else if ([33685504, 33751040, 36765696, 33619968, 34734080].includes(retProduct.categoryId)) {
    
    
 // 如果是铺贴类型：地面:33685504 墙面:33751040 扣板:36765696 定制素材:33619968 背景墙:34734080
 retProduct.x = {
    
    
   name: "长度",
   value: dataProduct.modelInfo.dx
 }
 retProduct.y = {
    
    
   name: "宽度",
   value: dataProduct.modelInfo.dy
 }
 retProduct.z = {
    
    
   name: "厚度",
   value: dataProduct.modelInfo.dz
 }
} else if (retProduct.categoryId === 34668544) {
    
    
 // 如果是 墙板:34668544
 retProduct.x = {
    
    
   name: "宽度",
   value: dataProduct.modelInfo.dx
 }
 retProduct.y = {
    
    
   name: "高度",
   value: dataProduct.modelInfo.dy
 }
 retProduct.z = {
    
    
   name: "厚度",
   value: dataProduct.modelInfo.dz
 }
} else {
    
    
 // 如果是 软装
 retProduct.x = {
    
    
   name: "长度",
   value: dataProduct.modelInfo.dx
 }
 retProduct.y = {
    
    
   name: "宽度",
   value: dataProduct.modelInfo.dy
 }
 retProduct.z = {
    
    
   name: "高度",
   value: dataProduct.modelInfo.dz
 }
}