+
неоднозначно. Это может означать «конкатенировать» или «добавить». Поскольку одна сторона является строкой, это означает «конкатенация», поэтому результат равен 11 (что, кстати, было одной из моих любимых шуток как маленький ребенок. Это и «1 + 1 = окно», так как показанный визуально: │┼│ ニ ⊞
)
-
однако имеет только одно значение: вычесть. Таким образом, он вычитает.
Этот вид проблемы отсутствует в других языках, таких как PHP, где «concatenate» - .
вместо +
, не делая никакой двусмысленности. Другие языки, такие как MySQL, даже не имеют оператора конкатенации, вместо этого используют CONCAT(a,b,c...)
.
Несколько проблем:
:colorBlock="..."
, но на самом деле прозвище названо hexcolor
в компоненте, поэтому настройка должна быть :hexcolor="..."
v-for
, hex
является объектом ({color: 'Red', hex: '#FF0000'}
), но я предполагаю, что вам нужно только передать шестнадцатеричный цветовой код, поэтому настройка должна быть :hexcolor="hex.hex"
. color-block
не имеет закрывающей скобки после class
color-block
ссылается на colors.hex
, но colors
не является частью компонента (это часть app
" s). Вероятно, вы должны были отобразить значение поддержки компонента (hexcolor
). Демо с исправлениями:
Vue.component('color-block', {
props: ['hexcolor'],
template: `
<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">
{{ hexcolor }}
</div>
`
});
new Vue({
el: '#app',
data() {
return {
colors: [
{ color: 'Red', hex: '#FF0000' },
{ color: 'Blue', hex: '#0000FF' }
]
};
}
})
<script src="https://unpkg.com/vue@2.5.16"></script>
<div id="app">
<color-block v-for="hex in colors" :hexcolor="hex.hex">
</color-block>
</div>