Attribute
绑定值到HTML元素的属性中
Kooboo使用的语法是 k-attribute="name value"， 多个属性用 ；号隔开。
Vue 可以使用v-bind:attributeName 或是简化的 :attributeName
k-attribute 示例
单个属性代码
<script env="server">
var value1 = "value1";
</script>
<div>
<div k-attribute="data value1"> text</div>
</div>结果
<div>
<div data="value1"> text</div>
</div>多个属性代码
<script env="server">
var value1 = "value1";
var value2 = "value2"
</script>
<div>
<div k-attribute="data value1;data2 prefix_{value2}"> text</div>
</div>结果
<div>
<div data="value1" data2="prefix_value2"> text</div>
</div>调用JS方法代码
<script env="server">
var value1 = "value1";
function attValue(input) {
return input + "End";
}
</script>
<div>
<div k-attribute="data attValue(value1)"> text</div>
</div>结果
<div>
<div data="value1End"> text</div>
</div>Class属性可以使用Json对象， 比如：
<div env="server">
<script>
var para = "text";
function checkactive(input) {
return input === "text";
}
</script>
<div k-attribute="class { isActive: checkactive(para), otherclass: true, nomatch:checkactive('nomatch')}"></div>
</div>结果
<div>
<div class="isActive otherclass"></div>
</div>Vue 语法示例
单个属性
<script env="server">
var value1 = "attvalue1";
</script>
<div env="server">
<div v-bind:data="value1"> text</div>
</div>结果
<div>
<div data="attvalue1"> text</div>
</div>多个属性
<script env="server">
var value1 = "attValue1";
var value2 = "attValue2"
</script>
<div env="server">
<div v-bind:data="value1" v-bind:data2="prefix_{value2}"> text</div>
</div>结果
<div>
<div data="attValue1" data2="prefix_attValue2"> text</div>
</div>JS function
<script env="server">
var value1 = "value1";
function attValue(input) {
return input + "End";
}
</script>
<div env="server">
<div v-bind:data="attValue(value1)"> text</div>
</div>结果
<div>
<div data="value1End"> text</div>
</div>class 属性
<div env="server">
<script>
var para = "text";
function checkactive(input) {
return input === "text";
}
</script>
<div :class="{ isActive: checkactive(para), otherclass: true, nomatch:checkactive('nomatch')}"></div>
</div>结果
<div>
<div class="isActive otherclass"></div>
</div>