vue && js 小案例

computed和watch实现 模糊搜索 列表人名

  <div id="root">
    <input v-model="keyWord" type="text" placeholder="请输入名字">
    <ul>
      <li v-for="(item, index) in filPerons">
        index:{
  {index}} |
        id:{
  {item.id}} |
        姓名:{
  {item.name}} |
        年龄:{
  {item.age}} |
        性别:{
  {item.sex}}<br />
      </li>
    </ul>
  </div>
  <script>
    const vm = new Vue({
      el: "#root",
      data: {
        keyWord: "",
        persons: [
          { "id": 1, "name": "马冬梅", "age": 19, sex: "女" },
          { "id": 2, "name": "周冬雨", "age": 20, sex: "女" },
          { "id": 3, "name": "周杰伦", "age": 21, sex: "男" },
          { "id": 4, "name": "温兆伦", "age": 22, sex: "男" },
        ],
        // filPerons: []
        //data里面名称不可以和computed里面重名否则会报错
        //vue.js:5108 [Vue warn]: The computed property "filPerons" is already defined in data.
      },
      methods: {},
      computed: {
        filPerons() {
          return this.persons.filter((p) => {    //filPerons需要返回数据
            return p.name.indexOf(this.keyWord) !== -1    //filter需要返回数据
          })
        }
      },
      //#region vscode 折叠注释代码
      // watch: {
      //   keyWord: {
      //     immediate: true,    //可以理解为初始化，上来就执行一次
      //     handler(val) {
      //       this.filPerons = this.persons.filter(function (p) {
      //         return p.name.indexOf(val) !== -1    //indexOf只要不返回-1就是有数据的
      //       })
      //     }
      //   }
      // }
      //#endregion
    })
  </script>

搜索结果排序

  <div id="root">
    <input v-model="keyWord" type="text" placeholder="请输入名字">
    <button @click="sortType = 2">年龄升序</button>
    <button @click="sortType = 1">年龄降序</button>
    <button @click="sortType = 0">原顺序</button>
    <ul>
      <li v-for="(item, index) in filPerons">
        index:{
  {index}} |
        id:{
  {item.id}} |
        姓名:{
  {item.name}} |
        年龄:{
  {item.age}} |
        性别:{
  {item.sex}}<br />
      </li>
    </ul>
  </div>
  <script>
    const vm = new Vue({
      el: "#root",
      data: {
        keyWord: "",
        persons: [
          { "id": 1, "name": "马冬梅", "age": 190, sex: "女" },
          { "id": 2, "name": "周冬雨", "age": 120, sex: "女" },
          { "id": 3, "name": "周杰伦", "age": 201, sex: "男" },
          { "id": 4, "name": "温兆伦", "age": 229, sex: "男" },
        ],
        sortType: 0, //0原顺序 1降序 2升序
      },
      computed: {
        filPerons() {
          const arr = this.persons.filter((p) => {
            return p.name.indexOf(this.keyWord) !== -1
          })
          if (this.sortType) {  //判断是否为真，0是假，负数是假，1,2是真
            arr.sort((p1, p2) => {
              //sort排序 就是p1-p2或者p2-p1的问题,但是p1,p2返回的对象,要获取里面的年龄
              //如果降序就是p2-p1,升序就是p1-p2
              return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
            })
          }
          return arr
        }
      },
    })
  </script>

收集表单数据

<div id="root">
    <form @submit.prevent="demo">
      <!--去掉前后空格-->
      账号<input type="text" v-model.trim="userInfo.account">
      <br />
      <br />
      密码<input type="password" v-model="userInfo.password">
      <br />
      <br />
      <!--输入内容转换成数字-->
      年龄<input type="number" v-model.number="userInfo.age">
      <br />
      <br />
      性别<input type="radio" name="sex" value="male" v-model="userInfo.sex" checked />男
      <input type="radio" name="sex" value="female" v-model="userInfo.sex" />女
      <br />
      <br />
      爱好<input ty