vueを使ってtodolistコンポーネントを書くにはどうすればよいですか?

この記事では主にvueコンポーネントで書かれたtodolistコンポーネントのサンプル解説を紹介していますので、必要な方は参考にしてください

topNavページにtodolistサブコンポーネントを挿入します。

どういうわけかわかりませんが、ここでのマークダウンコードは常にシリアルです。 。なので、読みにくいコードになってしまいましたが、ご容赦ください。最後にgithubのソースコードのアドレスを載せておきます。

1. 親コンポーネントtopNavにサブコンポーネントを登録し、サブコンポーネントを導入します

<template>
 <p>
  <p>下面这一行就是定义的组件名称</p>
  <todo-list></todo-list>
  <router-view></router-view>
 </p>
</template>
<script>
/*

1. importを通じてサブコンポーネントdrawerLayoutを導入します

2. サブコンポーネントを導入し、名前をtodoListに変更して、コンポーネントグループに登録します

3テンプレート内の HTML タグの形式でコンポーネントを使用します。todoList は 0ec99b62b9024a0017a7690df6791ba1

注: (1) サブコンポーネントの名前は重要ではありませんが、導入したサブコンポーネントコンポーネント名 todoList、2 番目の単語の最初の文字は大文字にする必要があります (そうしないと行き詰まってしまいます)

(2) タグを使用する場合、todoList は todo-list となり、キャメルケースで書かれます (一般的に言えば、 2番目 単語の最初の文字を小文字に変更し、その前に「-」を追加します)

*/
import todoList from '../components/todoList.vue'
 export default {
  components: {
   todoList
  },
  data() {
   return {
   };
  }
 }
</script>

2. まずはコンポーネントの機能を見てみましょう

まず、概要を見てみましょう。コンポーネントは次のようになります。その後、その書き方を考えていきます

最初に表示されるのは、編集... と表示される入力ボックスです。データを追加しない場合、デフォルトでは「まだコンテンツがありません」と表示されます。

次に、データを入力します。「最初の例」その後 Enter を押すと、リストにラジオ ボタン、テキスト、および削除ボタンが表示されます

これを実行するので、もう少し機能を追加し、いくつかの内部コマンドを使用する必要があります。設定した削除ルールは、

最初にリストを選択し、次に削除をクリックすると、レコードが削除されます。データ、 、リストは存在せず、「コンテンツはまだありません」と表示されます

3. todo サブコンポーネントの作成を開始します コードの最後にスタイルを入れているので無視してください。現時点ではそれです いくつかのクラス

まず、この todolist の一般的なフレームワークを設定してから、それに関数を追加しましょう

<template>
<p class="ex1">
  <p class="input-text">
 <label for="inputNum">请输入：</label>
 <input type="text" 
    id="inputNum" 
    name="inputNum" 
    placeholder="edit..">

 <!--列表内容-->
 <ul>
  <li>
   <input type="checkbox" >
   <span>dd</span>
   <button>删除</button>
  </li>
 </ul>
 <p class="empty" v-if="!inputList.length">暂无内容</p>
  </p>
</p>
</template>
<script>
 export default {
  data () {
   return {
    inputList: [],
    inputItem: {
     content: &#39;&#39;,
  finished: false,
  deleted: false
 }
   }
  },
  methods: {
   //将输入框的数据添加到list中  
   addItem: function() {}
   //改变选中状态
   changeState: function(index) {},
   //删除列表元素
   deleteItem: function(index) {}
  }
 }
</script>

次に、スペースが多すぎるため、小さなステップごとにコードを更新しません書き込む関数ブロックがあります (非常に詳しく説明します)

まず、次のアイデアを明確にします

入力ボックスにデータを入力し、Enter キーを押すと、行のリストが下に表示されます (ラジオの選択を含む)ボックス、入力データ、青色の操作ボタン)

入力ボックスの値とinputItem.contentを二方向でバインド

入力ボックスへのenterイベント(@keydown.13)を入力するたびにaddItemメソッドにバインドEnter キーを押して、入力ボックス内のデータをリスト (inputList 配列) に追加します

v-for コマンドを使用して、inputList 内の値をトラバースして表示します

ラジオ ボタンとリストの内容を選択します削除効果(中横(線が交差))になり、青い操作ボタンが赤い削除ボタンに変わり、ボタンをクリックすると列リストが削除されます

ラジオボタンのチェックとinputItemの終了をバインドします。バインドした後、これを使用して他のことを行うことができます

の 2 つの状態を通じてコン​​テンツにクラスを追加および削除したい場合、リストに追加されたばかりのリストのボタンは青い操作ボタンです。ラジオボタンが選択されているかどうか（つまり、上記の削除効果）と、ボタンを赤に変える削除ボタンを操作するには、changeStateメソッドをバインドできます

削除関数についてはどうですか？まず、リスト行を選択し、「削除」をクリックしてデータ行を削除する必要があります。そこで、ボタンを deleteItem メソッドにバインドします。このメソッドは、最初に完了した行が true かどうかを検出し、true の場合はデータの行を削除します。まず追加関数を完了します。データを入力します。入力ボックスで Enter を押すと、行のリストが下に表示されます (ラジオ ボタン、データ入力、削除ボタンを含む)

<template>
<p class="ex1">
  <p class="input-text">
 <label for="inputNum">请输入：</label>
 
  <!--@keydow.13表示回车的事件-->
  <!--v-model是为了让输入的数据和inputItem.content同步-->
  
  <input type="text" id="inputNum" name="inputNum" placeholder="edit.."
   @keydown.13="addItem" v-model="inputItem.content" class="edit"
  >
  <!--列表内容-->
  <ul class="task">
   <li v-for="(key, item) in inputList">
    <input type="checkbox" :checked="item.finished">
    <span>{{key.content}}</span>
    <button class="del">删除</button>
   </li>
  </ul>
 <p class="empty" v-if="!inputList.length">暂无内容</p>
  </p>
</p>
</template>
<script>
 export default {
  data () {...省略  },
  methods: {
   addItem: function() {
     this.inputList.push(this.inputItem);
     /*
     为什么我们要对inputItem再次初始化？
     解答：因为每次在输入框中输入数据，都会同时改变inputItem的content属性，
     然后我们点击回车，该inputItem的整个对象都添加进inputList中，
     按正常逻辑来说，inputList内的内容和inputItem是没有联系了。
     如果我们此时不对inputItem进行再次初始化，那么就会发现你再次在输入框中输入数据的时候，
     会同时改变下面的list的值，简易你们把初始化的代码去掉，运行下试试看！
     */
  this.inputItem = {
      content: &#39;&#39;,
      finished: false,
      deleted: false
  };
   },
   //改变选中状态
   changeState: function(index) {},
   //删除列表元素
   deleteItem: function(index) {}
  }
 }
</script>

まずはリストの内容のコードを見てみましょう

<!--列表内容-->
<ul class="task">
 <li v-for="(item, index) in inputList">
  <!--单选框绑定了item.finished，还添加了点击事件-->
  <input type="checkbox"
  :checked="item.finished"
  @click="changeState(index)"
  >
  <!--通过item.finished值来动态绑定class-->
  <span :class="{&#39;finish&#39;:item.finished}">{{item.content}}</span>
  <!--按钮的颜色通过动态添加class来实现，然后按钮的文本通过改变isDel来实现，isDel的改变也是通过changeState方法来操作的-->
  <button @click="deleteItem(index)"
   class="del"
   :class="{&#39;native&#39;:item.finished === true}"
  >{{isDel}}</button>
 </li>
</ul>
<p class="empty" v-if="!inputList.length">暂无内容</p>

次に、changeState について説明します方法

//改变选中状态
   changeState: function (index) {
    // this.inputList[index].finished = true 错误：这样如果点击第二次，无法回到false，就会一直true状态
    this.inputList[index].finished = !this.inputList[index].finished;
    // 根据finished的值来对应的修改isDel的值，isDel的值就是按钮的文本
    if (this.inputList[index].finished) {
   this.isDel = '删除'
    }else {
     this.isDel = '操作'
 }
   },
//删除列表元素
   deleteItem: function (index) {
   if (this.inputList[index].finished) {
    his.inputList.splice(index,1);
   }
   }

上記は私が皆さんのためにまとめたものです。はい、今後皆さんのお役に立てれば幸いです。

関連記事:

AngularJSを使用してExcelファイルをダウンロードする機能を実装する方法

vueで設定を構成する方法(詳細なチュートリアル)

JSでマルチオブジェクトの動きを実装する方法(詳細なチュートリアル)

以上がvueを使ってtodolistコンポーネントを書くにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。