JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Example">
    新字串：<input data-bind="value:newNum,valueUpdate:'afterkeydown'" /><button class="btn" data-bind="click:addNum,visible:newNum().length">加</button><br />
    陣列有：<span data-bind="text:nums().length"></span> 個<br />
    新字長有：<span data-bind="text:newNum().length"></span>
  <ul data-bind="foreach:nums">
      <li><span data-bind="text:$data"></span><button class="btn" data-bind="click:$parent.delNum">刪</button></li>
  </ul>
</div>

CSS

body { font-family: arial; font-size: 14px; }
.Example { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.btn { background-color: hsl(36, 100%, 40%) !important; background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffad32", endColorstr="#cc7a00"); background-image: -khtml-gradient(linear, left top, left bottom, from(#ffad32), to(#cc7a00)); background-image: -moz-linear-gradient(top, #ffad32, #cc7a00); background-image: -ms-linear-gradient(top, #ffad32, #cc7a00); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffad32), color-stop(100%, #cc7a00)); background-image: -webkit-linear-gradient(top, #ffad32, #cc7a00); background-image: -o-linear-gradient(top, #ffad32, #cc7a00); background-image: linear-gradient(#ffad32, #cc7a00); border-color: #cc7a00 #cc7a00 hsl(36, 100%, 35%); color: #333 !important; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.33); -webkit-font-smoothing: antialiased; }

JavaScript

function viewModel() {
  var self = this;
  self.title = 'helo';
  self.nums = ko.observableArray([1,2,3,4,5,6,7]);
  self.delNum = function(num){
      self.nums.remove(num);   
  };
  self.newNum = ko.observable('');
  //self.newLength = ko.observable(self.newNum().length);
  self.addNum = function(){
      self.nums.push(self.newNum());
      self.newNum('');
  };
    
};

ko.applyBindings(new viewModel());