Comment transmettre dynamiquement des paramètres et épisser des chaînes d'attributs de balise Vue

arrière-plan

L'espace réservé d'attribut de l'entrée de balise html doit transmettre dynamiquement des paramètres et épisser des chaînes fixes

Il ya un problème

Nous devons attribuer des caractères d'invite tels que "Veuillez saisir la longueur", "Veuillez saisir la largeur", "Veuillez saisir l'épaisseur" dans l'attribut d'espace réservé en fonction du type de la valeur d'entrée

solution

1. première méthode

   v-bind : attribut = "'chaîne' + nom de la variable personnalisée", vous devez faire attention à l'attribut doit être " : attribut = "ce formulaire fonctionnera

   <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. Deuxième méthode

   Nous pouvons également utiliser la syntaxe de chaîne de modèle pour lier une variable d'attribut à une balise normale

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

3. Troisième méthode

   Modifiez dynamiquement la valeur de l'espace réservé du composant. L'inconvénient est d'introduire une nouvelle variable.
   Liez l'espace réservé à un paramètre dynamique, comme suit :

   :placeholder="vpcPlaceholder"
   

   Ce paramètre dynamique est calculé par une certaine condition, il est donc plus raisonnable d'écrire ce paramètre dans computed(), comme indiqué dans le code suivant

   3.1 liaison dynamique d'espace réservé

   <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 le texte de l'espace réservé est généré en fonction des conditions

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

La proposition finale

<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
 }
}