이 문장의 목적

vue.js를 배우기 위해 다음과 같은 방법으로 todo 응용 프로그램을 만들었습니다.

form에서submit까지todo에 표시

delete로 삭제

v-for로 순환 처리

main.js

(function(){
  'use strict';
  var vm = new Vue({
    el: '#app',
    data: {
      todos: [
        'task 1',
        'task 2',
        'task 3'
      ]
    }
  });
})();

main.js에 todos라는 속성의 친필로 먼저 3개의task를 넣습니다.순환에 이 세 개를 표시하기 위해서.
index.html

<!DOCTYPE>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Myvueapp</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="todo in todos">
        {{ todo }}
      </li>
    </ul>
    <p>
      <input type="text" v-model="name" />
    </p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="js/main.js"></script>
</body>
</html>

todo in todos를 todos로 기술하고 todos의 요소를 todo로 순환시킨다.

submit 추가 todo

main.js

(function(){
  'use strict';
  var vm = new Vue({
    el: '#app',
    data: {
      newItem: '',
      todos: [
        'task 1',
        'task 2',
        'task 3'
      ]
    },
    methods: {
      addItem: function(){
        this.todos.push(this.newItem);
        this.newItem = '';
      }
    }
  });
})();

index.html

<!DOCTYPE>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Myvueapp</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="todo in todos">
        {{ todo }}
      </li>
    </ul>
    <form v-on:submit.prevent=addItem>
      <input type="text" v-model="newItem" />
      <input type="submit" value="Add" />
    </form>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="js/main.js"></script>
</body>
</html>

v-on에서submit에 불을 붙일 때addItem

addItem 함수로 todos의 배열에 newItem

을 추가합니다

그런 다음 빈 값을 대입

하여 값을 재설정합니다.

todo 삭제

main.js

(function(){
  'use strict';
  var vm = new Vue({
    el: '#app',
    data: {
      newItem: '',
      todos: [
        'task 1',
        'task 2',
        'task 3'
      ]
    },
    methods: {
      addItem: function(){
        this.todos.push(this.newItem);
        this.newItem = '';
      },
      deleteItem:function(index){
        if(confirm('are you sure?')){
          this.todos.splice(index, 1);
        }
      }
    }
  });
})();

index.html

<!DOCTYPE>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Myvueapp</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="(todo, index) in todos">
        {{ todo }}
        <span @click="deleteItem">☓</span>
      </li>
    </ul>
    <form v-on:submit.prevent=addItem>
      <input type="text" v-model="newItem" />
      <input type="submit" value="Add" />
    </form>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="js/main.js"></script>
</body>
</html>

v-for로 인덱스 수신

https://jp.vuejs.org/v2/guide/list.html#v-for-%E3%81%A7%E9%85%8D%E5%88%97%E3%81%AB%E8%A6%81%E7%B4%A0%E3%82%92%E3%83%9E%E3%83%83%E3%83%94%E3%83%B3%E3%82%B0%E3%81%99%E3%82%8B

= "deleteItem"으로 함수 점화

대화상자를 통해 ok가 있으면 splice로 삭제할 수 있음을 확인합니다.

http://www.htmq.com/js/array_splice.shtml

첫 번째 매개변수... 추가/삭제 위치(배열의 요소 수보다 큰 값을 지정하면 배열의 끝이 됩니다. 음수를 지정하면 배열의 끝에서 빼는 위치가 됩니다)

보조 매개변수...삭제할 컴포넌트 수

Reference

이 문제에 관하여(vue.js로 간단한 todo 프로그램 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/you8/items/a8fcbfe40aafce6fecfa

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다