Question

我尝试使用动态模板按条件库分配类。

我的模板是：

<template v-if="showTemplate" id="campaignBlock">
   <div v-class="@{{ block_class }}">
// <div v-class="{ block_class }">
     <img src="{{URL::asset('uploads/default.png')}}">
  </div>

模板通话：

<input type="button" @click="nb += 1" class="btn btn-default" value="Add New Section">
<div v-for="a in nb">
   <block v-if="nb == 4" block_class="col-md-3 col-sm-6 col-xs-6"></block>
   <block v-if="nb == 3" block_class="col-md-4 col-sm-6 col-xs-6"></block>
   <block v-if="nb == 2" block_class="col-md-6 col-sm-6 col-xs-6"></block>
   <block v-if="nb == 1" block_class="col-md-12 col-sm-6 col-xs-6"></block>
</div>

VueJs：

 Vue.component('block', {
   template: '#campaignBlock',
   props: ['block_class'],
   data: function () {
       return {
           n: 0,
           nb: 1,
           block_class: 'col-md-3 col-sm-6 col-xs-6'
        }
    }
});

在这里，如果我增加列，那么我将模板中预期的道具值作为变量。

离。 <div v-class="{{ block_class }}">

但是，如果我尝试分配＆＃34;类＆＃34;，只是作为文本出现。我也尝试过本地课程。我无法将pros(block_class)传递给模板。

处理此问题的任何可能方法？

我正在使用Laravel。

Answer 1

您可以使用dynamic styling执行此操作，

您可以将props中的对象哈希传递给组件，如下所示：

<template v-if="showTemplate" id="campaignBlock">
   <div :class="block_class">
// <div :class="block_class">
     <img src="{{URL::asset('uploads/default.png')}}">
  </div>

并在模板代码中：

class SecurityCode(forms.Form):
    sCode = forms.RegexField(regex=r'^\w+$', widget=forms.TextInput(attrs=dict(id="scode", name="scode", required=True, size=25, placeholder="    Security Code")), error_messages={ 'invalid': "This value must contain only letters, numbers and underscores." })

动态模板（组件）使用Vue Js探测类绑定问题

1 个答案: