Knockout控制元素内文本显示需要使用text绑定方法，此方法相当于在DOM中使用innerText将文本放入到元素中。使用的方法是：
<div data-bind="text:myText"></div>
其中，myText可以是字符串、函数、表达式，只要最终返回的结果是字符串即可正常显示。下面列举一些相关例子。
字符串形式
<div data-bind="text:'小虾虎鱼'"></div>
注意：此方式在实际应用中无任何意义。
函数形式
使用Obervable的方法
<div data-bind="text:myText"></div>
<script>
var viewmodel = {
myText:ko.observable('小虾虎鱼')
};
ko.applyBindings(viewmodel);
</script>
使用自定义函数的方法
<div data-bind="text:myText('abc')"></div>
<script>
var viewmodel = {
myText:function(text){
return text;
}
};
ko.applyBindings(viewmodel);
</script>
表达式形式
<div data-bind="text:myText()?'小虾':'虎鱼'"></div>
以上便是控制元素内文本显示的三种方式。
下面来一个较为复杂的例子，该例子的应用场景比较广泛。需求是这样子的： 有一个按钮和一个状态文本，点击按钮时状态文本发生变化并且按钮的文本也会变化。如默认按钮的文本是禁用，状态文本是已启用，当点击按钮后，按钮的文本变成启用，状态文本变成已禁用，如此规律循环。 代码如下：
<span data-bind="text:status()?'已启用':'已禁用'"></span>
<button data-bind="text:status()?'禁用':'启用',click:change"></button>
<script>
var viewmodel = {
status:ko.observable(true),
change:function($data){
$data.status(!$data.status());
}
};
ko.applyBindings(viewmodel);
</script>
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索字符串
， 应用
， 函数
表达式
，以便于您获取更多的相关知识。
时间： 2024-09-28 15:14:49