sergAccount

Untitled

Sep 29th, 2020
202
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.98 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Hello Vue</title>
  5.     <meta charset="utf-8">
  6.     <!-- https://unpkg.com/vue@2.6.11/dist/vue.min.js -->
  7.     <!-- подключение фреймворка vue.js -->
  8.     <script type="text/javascript" src="https://unpkg.com/vue"></script>
  9.     <style type="text/css">
  10.         body {
  11.   background: #20262E;
  12.   padding: 20px;
  13.   font-family: Helvetica;
  14. }
  15.  
  16. #app {
  17.   background: #fff;
  18.   border-radius: 4px;
  19.   padding: 20px;
  20.   transition: all 0.2s;
  21. }
  22.  
  23. li {
  24.   margin: 8px 0;
  25. }
  26.  
  27. h2 {
  28.   font-weight: bold;
  29.   margin-bottom: 15px;
  30. }
  31.  
  32. del {
  33.   color: rgba(0, 0, 0, 0.3);
  34. }
  35.     </style>
  36. </head>
  37. <body>
  38. <!-- элемент div c идентификатором app -->
  39.  
  40. <!-- v-for -->
  41. <div id="app"> 
  42.   <h2>Todos:</h2>
  43.   Название задачи <input type="text" v-model="newTaskText" >
  44.   Статус <input type="checkbox" v-model="newTaskState" >
  45.   <input type="button" value="ADD" @click="addTask()">
  46.   <ol>
  47.     <li v-for="todo in todos">
  48.       <label>
  49.         <input type="checkbox" @change="toggle(todo)" :checked="todo.done">
  50.         <del v-if="todo.done">
  51.           {{ todo.text }}
  52.         </del>
  53.         <span v-else>
  54.           {{ todo.text }}
  55.         </span>
  56.       </label>
  57.     </li>
  58.   </ol>
  59. </div>
  60. </body>
  61. <script type="text/javascript">
  62.     // создаем объект Vue (экземпляр Vue)
  63.     new Vue({
  64.   el: "#app",
  65.   data: {
  66.     newTaskText: "",
  67.     newTaskState: false,
  68.     todos: [
  69.       { text: "Learn JavaScript", done: false },
  70.       { text: "Learn Vue", done: false },
  71.       { text: "Play around in JSFiddle", done: true },
  72.       { text: "Build something awesome", done: true }
  73.     ]
  74.   },
  75.   methods: {
  76.     toggle: function(todo){
  77.         todo.done = !todo.done
  78.     },
  79.     addTask(){  
  80.        if(this.newTaskText!='') {
  81.           this.todos.push({"text": this.newTaskText, "done": this.newTaskState });
  82.           this.newTaskText='';
  83.           this.newTaskState=false;
  84.        }
  85.     }
  86.   }
  87. })
  88. </script>
  89. </html>
Add Comment
Please, Sign In to add comment