malinajs.html

<script>
  let name = '';
  let todos = [{name: 'Linux'}, {name: 'Ubuntu', done: true}];
  let active;
  
  function add() {
    if(!name) return;
    todos.push({name: name});
    name = '';
  }
  
  const remove = i => todos.splice(i, 1);
  const numDone = () => todos.filter(t => t.done).length;
</script>

{#if active}
Edit: <input type="text" on:keydown|enter={active=null} bind:value={active.name} />
{:else}
<input type="text" on:keydown|enter={add()} bind:value={name} />
{/if}

<ul>
  {#each todos as todo}
  <li class:active={todo == active} class:inactive={todo.done}>
    <input type="checkbox" bind:checked={todo.done} />
    <span on:click={active=todo}>{$index}:  {todo.name}</span>
    <a href on:click|preventDefault={remove($index)}>remove</a>
  </li>
  {/each}
</ul>

Total done: {numDone()} of {todos.length}

<style>
  li {cursor: pointer;}
  .active {background-color: #cfc;}
  .inactive {text-decoration-line: line-through; color: gray;}
</style>

sveltejs.html

<script>
  let name = '';
  let todos = [{name: 'Linux'}, {name: 'Ubuntu', done: true}];
  let active;
  
  function add() {
    if(!name) return;
    todos.push({name: name});
    name = '';
    todos=todos;
  }
  
  const enterAdd = (e) => {
    if(e.keyCode == 13) add();
  }
  
  const enterEdit = (e) => {
    if(e.keyCode == 13) active=null;
    todos=todos;  // to render changes to list
  }
  
  const remove = i => {
    todos.splice(i, 1);
    todos=todos;
  }
  $: numDone = todos.filter(t => t.done).length;
</script>

{#if active}
Edit: <input type="text" on:keydown={enterEdit} bind:value={active.name} />
{:else}
<input type="text" on:keydown={enterAdd} bind:value={name} />
{/if}

<ul>
  {#each todos as todo, index (todo) }
  <li class:active={todo == active} class:inactive={todo.done}>
    <input type="checkbox" bind:checked={todo.done} />
    <span on:click={() => active=todo}>{index}: {todo.name}</span>
    <a href on:click|preventDefault={() => remove(index)}>remove</a>
  </li>
  {/each}
</ul>

Total done: {numDone} of {todos.length}

<style>
  li {cursor: pointer;}
  .active {background-color: #cfc;}
  .inactive {text-decoration-line: line-through; color: gray;}
</style>

vuejs.html

<script>
new Vue({
  el: "#app",
  data: {
    todos: [{ name: "Linux", done: false }, { name: "Ubuntu", done: true }],
    name: '',
    active: null
  },
  methods: {
    remove: function(i) {
      this.todos.splice(i, 1);
    },
    add: function() {
      this.todos.push({name: this.name});
      this.name = '';
    }
  },
  computed: {
    numDone: function() {return this.todos.filter(t => t.done).length}
  }
})
</script>
<div id="app">
  <span v-if="active">
    Edit: <input type="text" v-model="active.name" v-on:keyup.enter="active=null" />
  </span>
  <input v-else type="text" v-model="name" v-on:keyup.enter="add" />
  
  <ul>
    <li v-for="(todo, index) in todos" :class="{active: todo == active, inactive: todo.done}">
      <input type="checkbox" v-model="todo.done">
      <span v-on:click="active=todo" :class="{active: todo == active}">
        {{index}}: {{ todo.name }}
      </span>
      <a href v-on:click.prevent="remove(index)">remove</a>
    </li>
  </ul>
  Total done: {{numDone}} of {{todos.length}}
</div>

<style>
li {cursor: pointer;}
  .active {background-color: #cfc;}
  .inactive {text-decoration-line: line-through; color: gray;}
  #app {padding: 12px;}
</style>

Malina.js: https://bit.ly/2VqEloi
Vue.js: https://jsfiddle.net/lega911/w7rje2g8/
Svelte.js: https://svelte.dev/repl/347969ebe83343b5a4f495924fa0c790?version=3.23.2
Svelte v2: https://svelte.dev/repl/3db994685aba408c897b40b25de41178?version=3.23.2