Inner HTML/Text
To bind content into the inner HTML or text of an element, you can use the "k-content" directive, which is equivalent to the "v-html" directive, and the "k-text" directive, which is equivalent to the "v-text" directive. These directives also support Vue's double curly braces {{}} and triple curly braces {{{}}} bindings.
"k-" directive:
<script env="server">
var text = "hello world";
var html = "<b>hello world</b>"
</script>
<div k-content="html">html</div>
<div k-text="text">text</div>Result
<div><b>hello world</b></div>
<div>hello world</div>Alternative "v-" directive:
<script env="server">
var text = "hello world";
var html = "<b>hello world</b>"
</script>
<div env="server" v-html="html">html</div>
<div env="server" v-text="text">text</div>Or
<script env="server">
var text = "hello world";
var html = "<b>hello world</b>"
</script>
<div env="server">{{{html}}}</div>
<div env="server">{{text}}</div>Result
<div>hello world_appended!</div>
<div>hello world_appended!</div>Merge Function
<script env="server">
var text = "hello world";
</script>
<div env="server" v-text="prefix_{text}">value</div>
<div k-content="prefix_{text}">value</div>Js Function
Code
<script env="server">
var text = "hello world";
function appendx(input) {
return input + "_appended!"
}
</script>
<div env="server" v-text="appendx(text)">value</div>
<div k-content="appendx(text)">value</div>Result
<div>hello world_appended!</div>
<div>hello world_appended!</div>