If else

Conditional rendering, the element will be displayed if the condition is true.

k-if and v-if has the same syntax.

Condition test result is the value of Truthy in JavaScript

Reference：

https://developer.mozilla.org/en-US/docs/Glossary/Truthy

Example 1 Simple comparision

code：

<script env="server">
	var value1 = 3;
	var value2 = 1; 
</script>

<div k-if='value1 > 2'>value1 bigger than 2</div><div k-else>value1 smaller than 2</div>

<div k-if='value2 > 2'>value2 bigger than 2</div><div k-else>value2 smaller than 2</div>

result：

<div>value1 bigger than 2</div>

<div>value2 smaller than 2</div>

Example 2， Truthy

Code

<script env="server">
	var value1 = "anyvalue"
	var value2; 
</script>
<div k-if="value1">value1 has value</div><div k-else>value1 no value</div>

<div k-if="value2">value2 has value</div><div k-else>value2 no value</div>

Result

<div>value1 has value</div>

<div>value2 no value</div>

Example 3， JS function

<script env=server> 
	function abc(){return 'yes'}
</script>
<div k-if='abc()'> text</div>

Example 4， repeat counter

Available operators includes:

repeat/!first

repeat/first

repeat/last

repeat/!last

repeat/even

repeat/odd

repeat/2n+1

<div k-for="n in 10" repeat-self="true">
	<span k-content="n"></span>: <span>all row</span>
	<span k-if="repeat/!first">!First</span>
	<span k-if="repeat/first">First</span>
	<span k-if="repeat/last">Last</span>
	<span k-if="repeat/!last">!Last </span>
	<span k-if="repeat/even">Even</span>
	<span k-if="repeat/odd">Odd</span>
	<span k-if="repeat/2n+1">every 2 row</span>
	<span k-if="repeat/3n+1">every 3 row</span>
</div>

Result

1: all row First !Last Odd every 2 row every 3 row
2: all row !First !Last Even
3: all row !First !Last Odd every 2 row
4: all row !First !Last Even every 3 row
5: all row !First !Last Odd every 2 row
6: all row !First !Last Even
7: all row !First !Last Odd every 2 row every 3 row
8: all row !First !Last Even
9: all row !First !Last Odd every 2 row
10: all row !First Last Even every 3 row