在线代码编辑器-开发工具-核心编程

<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Vue</title>
   <script src="https://www.hxstrive.com/cdn/libs/vue/2.7.16/vue.min.js"></script>
   <style type="text/css">
       html,body { padding:20px; margin:0; width:100%; height:100%; box-sizing: border-box;}
       #app .condition { width:100%; }
       .todo_ul { list-style: none; padding: 0; }
       .todo_ul li { padding: 5px; }
       .todo_status {
           background: #F0F0F0; font-size: 12px; padding: 2px 6px;
           border-radius: 5px; margin-right: 10px;
       }
       .todo_status_ok { background:green; color:#FFF; }
       .btn_active { font-weight: bold; color: green; font-size: 16px; }
   </style>
</head>
<body>

<div id="app">
       <p>
           <button v-bind:class="{btn_active: currentStyle == ''}" v-on:click="changeStyle('')">默认样式</button>
           <button v-bind:class="{btn_active: currentStyle == 'style1'}" v-on:click="changeStyle('style1')">样式一</button>
           <button v-bind:class="{btn_active: currentStyle == 'style2'}" v-on:click="changeStyle('style2')">样式二</button>
       </p>
       <p>
           <input type="text" placeholder="TODO 查询" v-model="condition" />
       </p>

<todo-list v-bind:filtered_todos="filteredTodos">
           
           <template v-if="currentStyle == 'style1'" v-slot:todo="{ todo }">
               <input type="checkbox" v-model="todo.isComplete" />
               {{ todo.text }}
           </template>

<template v-else-if="currentStyle == 'style2'" v-slot:todo="{ todo }">
               <span v-if="todo.isComplete" class="todo_status todo_status_ok">已完成</span>
               <span v-else  class="todo_status">未完成</span>
               {{ todo.text }}
           </template>
       </todo-list>
   </div>

<script type="text/javascript">
       Vue.component('todo-list', {
           props: [ "filtered_todos" ],
           template: `
               <ul>
                   <li v-for="todo in filtered_todos" v-bind:key="todo.id">
                       
                       <slot name="todo" v-bind:todo="todo">
                           
                           {{ todo.isComplete ? "√" : "-" }}
                           {{ todo.text }}
                       </slot>
                   </li>
               </ul>
           `
       });

var app = new Vue({
           el: "#app",
           data: {
               currentStyle: "",
               condition: "",
               todoList: [
                   { id:1, text:"搭建 Vue.js 开发环境", isComplete:true },
                   { id:2, text:"学习 Vue.js 基础语法", isComplete:true },
                   { id:3, text:"学习 Vue.js 组件知识", isComplete:false },
                   { id:4, text:"学习 Vue.js 插槽知识", isComplete:false },
                   { id:5, text:"学习 Vue.js 工作原理", isComplete:false },
                   { id:6, text:"利用 Vue.js 实现 ToDO App", isComplete:false }
               ]
           },
           computed: {
               filteredTodos: function(){
                   return this.todoList.filter(item => {
                       return (item.text || "").indexOf(this.condition) != -1;
                   });
               }
           },
           methods: {
               changeStyle: function(style) {
                   this.currentStyle = style;
               }
           }
       });
   </script>

</body>
</html>

在线代码编辑器 HTML / CSS / JavaScript 实时预览

自动执行

代码编辑区

字符数: 0 提示: 输入完整的 HTML 代码，需包含 DOCTYPE 声明与 html 根标签

预览效果