v-if、v-for、列表的过滤与排序、强制绑定class和style、收集表单信息

已于 2022-07-20 15:16:52 修改
阅读量724 收藏 1
点赞数
文章标签： vue.js 前端 javascript
于 2022-07-20 13:53:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60376759/article/details/125890464
版权

v-if

<body>
  <div id="app">
    <p v-if="isShow">表白成功</p>
    <p v-else>表白失败</p>
    <hr>
    <p v-show="isShow">求婚成功</p>
    <p v-show="!isShow">求婚失败</p>
    <button @click="changeIsShow">切换</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el:'#app',
      data:{
        isShow:true
      },
      methods: {
        changeIsShow(){
          this.isShow = !this.isShow
        }
      },
    })
  </script>
</body>

vif 和 vshow都是条件渲染有什么区别？

    vif后面的条件如果为真，当前元素才会渲染，也就是说条件为假的元素内存中都不存在

    vshow后面的条件无论是真还是假，都会进行渲染，也就是说条件为假的元素内存中仍然存在，只是使用css隐藏了

    vif和vshow根据使用场景的不同，效率是不一样的

    如果我们切换的频率很高，vshow比较合适，因为不需要重复的去渲染元素，内存也不需要重复的去创建销毁

    如果我们切换的频率不高，vif比较合适，因为内存占用比较少，效率比较高

后期我们会使用组件标签，组件创建有生命周期，如果我们使用vif在组件标签身上

    假设条件为假，这个组件是不会创建了，内存当中没有组件对象

    如果使用的是vshow在组件标签身上，那么不管条件是真还是假，这个组件都会创建，生命周期都会执行对应的钩子

从输入url回车，到页面渲染完成经历了什么？

  1、dns解析，本质是把域名解析为 ip:端口

  2、tcp建立连接  三次握手

  3、http请求发送请求报文

  4、后台服务器返回响应报文

  5、浏览器拿到响应报文后，解析渲染

     html  ----  domTree

     css  ----   cssTree

     把生成的domTree和cssTree合并为renderTree 进行渲染

  6、和后台断开连接  四次挥手

v-for 

<body>
  <div id="app">
    <ul>
      <!-- key是虚拟dom进行diffing算法对比的时候，所依赖的标识
      这个标识能用唯一值就用唯一值，尽量别用下标

      如果只是为了查，那么写index下标没问题
      如果是增删改，那么写下标可能会出问题
      最次也会导致效率低下 -->
      <li v-for="(person,index) in persons" :key="person.id">
        {{person.id}} --- {{person.username}} --- {{person.age}}
      </li>
    </ul>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el:'#app',
      data(){
        return {
          persons:[
            {id:1,username:'zhaoliying',age:35},
            {id:2,username:'yangmi',age:36},
            {id:3,username:'dilireba',age:30}
          ]
        }
      }
    })
  </script>
</body>

vue处理响应式数据

vue如何去监视数据变化而更新页面（点击按钮修改第一项）
    1、修改数组当中对象的属性，发现页面可以改变
    2、通过数组的下标直接修改数组当中的整个对象，发现页面改变不了
    3、调用数组的方法直接修改数组当中的整个对象，发现页面也可以改变
原因：
    修改数组当中对象的属性，都是可以修改的，因为对象的所有属性都添加了get和set方法（响应式数据），
     data当中所有的对象的属性，都是响应式
    通过下标直接修改数组整个对象，不可以展示到页面，但是数据确实改了，数组的下标没有get和set

    通过数组的方法去修改整个对象也是可以修改的，因为vue当中重写了数组的部分原生方法，额外添加了展示到页面的功能

    
    对象数据和数组数据响应式的区别

<body>
  <div id="app">
    <ul>
      <li v-for="(person, index) in persons" :key="person.id">
        {{person.id}} --- {{person.username}} --- {{person.age}}
      </li>
    </ul>
    <button @click="update">点击修改第一个人的名字</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el:"#app",
      data(){
        return {
          persons:[
            {id:1,username:'zhaoliying',age:35},
            {id:2,username:'yangmi',age:36},
            {id:3,username:'dilireba',age:30}
          ]
        }
      },

      methods: {
        update(){
          // this.persons[0].username = 'yingbao'
          // this.persons[0] = {id:1,username:'yingbao',age:35}
          this.persons.splice(0,1,{id:1,username:'yingbao',age:35})
        }

      },
    })
  </script>
</body>

        vue在处理数据的时候响应式是按照以下规则来的

        对于对象

        当我们一旦实例化vm实例的时候，vue内部会做数据劫持，把

        data当中所有的对象属性（包括深层次），都添加了getter和setter

        让每个属性都是响应式的

        因此第一项成功了

        对于数组

        数组的响应式是修改了7个方法，只要使用的是下面7个方法当中的、

        那么一定响应式，其实本质就是给这些数组方法添加了修改页面的功能而已

        push()

        pop()

        shift()

        unshift()

        splice()

        sort()

        reverse()

        所以第三种可以

列表的过滤

<body>
  <div id="app">
    <input type="text" v-model="keyword">
    <ul>
      <!-- 不推荐，效率低 -->
      <!-- <li v-for="(person, index) in persons" :key="person.id" v-if="person.username.indexOf(keyword)!==-1">
        {{person.id}} --- {{person.username}} --- {{person.age}}
      </li> -->

      <li v-for="(person, index) in newPersons" :key="person.id">
        {{person.id}} --- {{person.username}} --- {{person.age}}
      </li>
    </ul>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el:"#app",
      data(){
        return {
          persons:[
            {id:1,username:'zhaoliying',age:35},
            {id:2,username:'yangmi',age:36},
            {id:3,username:'dilireba',age:30}
          ],
          keyword:''
        }
      },
      computed: {
        newPersons(){
          let {persons,keyword} = this
          return persons.filter(item => item.username.indexOf(keyword) !== -1)
        }
      },
    })
  </script>
</body>

      vfor和vif能不能同时使用？ 答案是肯定的
      vfor和vif同时使用的时候，谁的优先级高：答案是vfor
      但是不推荐vfor和vif同时使用，因为vfor本身会出现很多个元素，每个元素身上都有一个指令v-if
      vif指令都是需要进行解析的，指令进行解析的过程是很消耗性能的，这样效率就会很低下
      原因是效率极低

      解决办法：
       计算属性，我们通过计算属性把需要展示的数据，计算为一个新数组，展示的时候我们不和原数组拉关系
       这样的话，vfor遍历直接遍历计算出来的新数组即可

列表的排序 

<body>
  <div id="app">
    <input type="text" v-model="keyword">
    <ul>
      <!-- 不推荐，效率低 -->
      <!-- <li v-for="(person, index) in persons" :key="person.id" v-if="person.username.indexOf(keyword)!==-1">
        {{person.id}} --- {{person.username}} --- {{person.age}}
      </li> -->

      <li v-for="(person, index) in newPersons" :key="person.id">
        {{person.id}} --- {{person.username}} --- {{person.age}}
      </li>
    </ul>

    <!-- 事件的回调 可以是回调也可以是函数调用
    当我们不加任何参数的时候，它可以写成回调
    当我们需要加参数的时候，它可以写成函数调用,但是不能加this
    -->

    <button @click="changeFlag(0)">原样排序</button>
    <button @click="sortFlag = 1">年龄升序</button>
    <button @click="sortFlag = 2">年龄降序</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el:"#app",
      data(){
        return {
          persons:[
            {id:1,username:'zhaoliying',age:35},
            {id:2,username:'yangmi',age:36},
            {id:3,username:'dilireba',age:30}
          ],
          keyword:'',
          sortFlag:0  //设计排序标志数据
        }
      },
      computed: {
        newPersons(){
          let {persons,keyword,sortFlag} = this
          let arr = persons.filter(item => item.username.indexOf(keyword) !== -1)
          // if(sortFlag){
          //   if(sortFlag === 1){
          //     arr.sort((a,b) => {
          //       return a.age - b.age
          //     })
          //   }else{
          //     arr.sort((a,b) => {
          //       return b.age - a.age
          //     })
          //   }
          // }
          if (sortFlag) arr.sort((a,b) => sortFlag === 1? a.age - b.age : b.age - a.age)
          return arr
        }
      },
      
      methods: {
        // 如果后期写函数，函数内部只有一行代码
        // 可以省略函数

        changeFlag(flag){
          this.sortFlag = flag
        }
      },
      
    })
  </script>
</body>

    列表的过滤和排序

    列表过滤：

    1、收集用户输入的关键字  需要设计收集的数据  vmodel收集keyword

    2、页面展示的不再是原数组，而是根据原数组和keyword计算出来的新数组，否则就会碰到vfor和vif同时使用

    3、页面展示的数据替换为新数组

    列表排序(过滤后排序)

    1、要排序需要设计排序标识数据 sortFlag  0原样 1升序 2降序

    2、添加点击事件，点击三个按钮我们只需要负责修改sortFlag数据

    3、sortFlag的改变是要引起过滤的新数组进行改变，sortFlag也得加入到计算当中去

    4、过滤完成之后，只需要根据sortFlag的值，进行排序过滤出来的数组即可

强制绑定class和style

强制绑定样式class和style
    class动态绑定：
        1、类名不确定                                   字符串形式
        2、类名确定，但是不知道哪个生效                 对象形式
        3、类名有几个都生效                            数组形式   


    style动态绑定
        1、必须把原来的东西写在对象当中，样式名不变，样式值是动态的
        2、样式名如果不合法，要变为小驼峰写法

<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>Document</title>
  <style>
    .classA{
      font-size: 80px;
    }
    .classB{
      color: hotpink;
    }
    .classC{
      background-color: greenyellow;
    }
    .classD{
      font-size: 30px;
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- 强制绑定class -->
    <!-- 1、我不知道这个元素应该是哪个类，是哪个类是后台给我返回来的  字符串用法-->
    <p  class="classD" :class="myClass" >我爱你赵丽颖</p>

    <!-- 2、我知道哪些类在这个元素身上，但是我不知道哪个生效  对象写法-->
    <p :class="{classA:isA,classB:isB}">我爱你赵丽颖</p>

    <!-- 3、元素身上有多个类生效，多个类也是后台返回的  数组写法-->
    <p :class="classArr">我爱你赵丽颖</p>


    <!-- 强制绑定style -->
    <!-- 样式属性我们知道，值是由后台返回来的 对象写法-->
    <p :style="{fontSize,color:myColor}">我爱你赵丽颖</p>

    <button @click="updateClass">点击改变样式</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el:'#app',
      data(){
        return {
          myClass:'classA',
          isA:true,
          isB:false,
          classArr:['classA','classB','classC'],
          fontSize:'100px',
          myColor:'skyblue'

        }
      },
      methods: {
        updateClass(){
          this.isA = !this.isA
          this.isB = !this.isB
        }
      },
    })
  </script>
</body>

 事件的绑定相关

事件绑定方法
    v-on 只是绑定事件的复杂写法
    @ 只是简写


    1、回调写法
        回调不需要自己加括号，直接写函数名即可，函数在定义的时候第一个形参接收的就是事件对象


    2、函数调用
        函数调用是自己加括号调用，调用的时候，vue会自动在我们写的函数调用外层添加一个函数，这个函数才是真正的回调
        这个函数默认是有一个形参叫$event,(不能更改)， 我们在写的函数调用如果需要把事件对象传递下去，那么就得传实参
        $event,我们的函数定义就需要去接收这个参数，拿到事件对象去使用，如果不需要就不用传，函数内部也就拿不到事件对象。 如果我们传递参数不光要事件对象，还需要自己定义的参数，那么此时，需要在函数调用的时候，传递两个，一个是
        $event,一个是自己的参数

        $event后期我们称为叫做默认参数，在原生dom事件当中只要见到$event,代表的就是事件对象

<body>
  <div id="app">
    <!-- 最原始的写法,而且不带参数 -->
    <button v-on:click="test">test</button>
    <!-- 把最原始的写法进行简写 -->
    <button @click="test">test</button>
    <!-- 默认我们写的回调传递了一个参数是事件对象 
    和下面这个写法是一样的，函数调用如果你也要拿到事件对象
    因为外层给你自动添加一个函数，外层函数就变为回调函数，内层函数想使用
    事件对象，需要把外层函数接收的事件对象，进行手动传递,$event只能出现在模板当中
    后期我们把$event称为叫默认参数
    -->
    <button @click="test1($event)">test1</button>
    <!-- 一旦写了函数调用,并且还要传递事件对象
    全写应该是这个样子
    写函数调用的时候别加this，加了this就报错，因为this指向改变了
    function($event){
      test1($event)
    }
    -->

    <!-- 不但想传递事件对象还要传递自己额外的参数，那么就一起传,没有先后顺序，接收的时候注意 -->
    <button @click="test2(10,$event)">test2</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el:'#app',
      data(){
        return {

        }
      },
      methods: {
        test(event){
          console.log(event.target.innerHTML);
        },
        test1(event){
          console.log(event.target.innerHTML);
        },
        test2(num,event){
          console.log(event.target.innerHTML,num);
        }
      },

    })
  </script>
</body>

自动收集表单

自动收集表单数据v-model的应用
    输入框数据    输入的数据会自动赋值给data的数据
    单选框数据    选中的value值会自动付给data的数据
    多选框数据   单个使用操作的是布尔值   多个使用操作的是value值
    下拉菜单数据    选中的option的value值会自动赋值给data的数据
    文本域数据    写上的文本会自动赋值给data的数据 

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
  <div id="app">
    <!-- 1、收集表单元素的数据，用的是v-model
         2、一般默认情况v-model收集的是表单元素的value值
    -->
    <!-- 文本输入框和密码输入框，value值就是用户输入的数据 -->
    用户名: <input type="text" placeholder="请输入用户名" v-model="userInfo.username"> <br>
    密  码: <input type="password" placeholder="请输入密码" v-model="userInfo.password"><br>


    性  别：
    <!-- 单选输入框,默认是没有value值，value值必须自己写 -->
        <label><input type="radio" name="sex" value="male" v-model="userInfo.gender">男</label>
        <label><input type="radio" name="sex" value="female" v-model="userInfo.gender">女</label> <br>
    爱  好：

    <!-- 多选输入框分为成组使用和单个使用，现在这个爱好是属于成组使用
    如果是成组使用，收集value值需要收集到一个数组当中，成组使用的时候value值也需要自己写 -->
        <label><input type="checkbox" value="basketball" v-model="userInfo.favs">🏀</label>
        <label><input type="checkbox" value="football" v-model="userInfo.favs">⚽</label>
        <label><input type="checkbox" value="ping-pang" v-model="userInfo.favs">🏓</label> <br>
    城  市:
    <!-- 下拉选择收集的数据是select要收集的，也就是说vmodel要写在select身上
    但是select本省并没有value值，select收集的是选中的option的value值
    option的value值写什么，要看你收集什么？
key：diffing算法当中对比虚拟dom所用的标识
   -->
        <select v-model="userInfo.cityId">

          <option :value="city.id" v-for="(city, index) in cities" :key="city.id">
            {{city.name}}
          </option>
        </select> <br>
    个人简介：
    <!-- 文本域和文本输入框一样 -->
        <textarea  cols="30" rows="10" v-model="userInfo.desc"></textarea>
        <br>
    <!-- 如果多选框是单个使用的vmodel可以理解为其实是默认和checked绑定的 -->
    <input type="checkbox"  v-model="userInfo.isChecked">同意协议
    <button @click="submit">提交</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el:'#app',
      data(){
        return {
          userInfo:{
            username:'',
            password:'',
            gender:'',
            favs:[],
            cityId:2,
            desc:'',
            isChecked:false
          },
          cities:[
            {id:1,name:'西安'},
            {id:2,name:'北京'},
            {id:3,name:'上海'},
          ]
        }
      },
      methods: {
        // submit(){
        //   axios({
        //     url:'./xxx',
        //     method:'post',
        //     data:this.userInfo
        //   })
        // }
      },
    })
  </script>
</body>
</html>

半夜删你代码·
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值