Vue3

最新推荐文章于 2024-09-18 09:53:11 发布

Jookerone

最新推荐文章于 2024-09-18 09:53:11 发布

阅读量1k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_45178972/article/details/111143587

版权

Vue 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

高级函数：
map/filter/reduce
filter 中的回调函数有一个要求：必须返回一个boolean值
true:当返回true时，函数内部会自动将这次回调的n加入到新的数组中；
false：当返回false时，函数内部会过滤掉这次的n

<script>
    //1.找出nums中小于100的元素放到newNums
    const nums = [10,20,200,300,40,50];
    //每次遍历一个元素都调用function，并把元素传给形参n
    let newNums = nums.filter(function(n){
      return n<100;
    })
    console.log(newNums) ;//[10,20,40,50]
  </script>

map: 将每次调用function（n）的返回结果放到新的数组中

//2.将newNums中的每个元素*2 放到newNums2
    let newNums2 = newNums.map(function(n){
      return n * 2;
    })

reduce:对数组中所有内容进行汇总


  console.log(newNums2);// [20, 40, 80, 100]
  //3.将newNums2的元素相加
    let total = newNums2.reduce(function(preValue,n){
      return preValue + n; //返回结果作为preValue
    },0) //0 作为第一次调用的preValue
    //分析调用过程：
    //第一次: preValue=0 ,n = 20;
    //第二次: preValue=函数的返回值(即preValue + n)=20 ,n = 40;
    //第三次: preValue=60 ,n = 80;
    //第四次: preValue=140 ,n = 100;
    //240

用一行代码完成上面三个需求：

const nums = [10,20,200,300,40,50];
let total = nums.filter(function(n){
      return n<100;
    }).map(function(n){
      return n*2;
    }).reduce(function(preValue,n){
      return preValue + n;
    },0)
    console.log(total);
//另一种：
let total = nums.filter(n => n < 100).map(n => n * 2).reduce((preValue,n) => preValue + n,0);

input标签有 input监听事件：

//valueChange不用加括号，会自动传进去$event
<input type="text" :value="message" @input="valueChange">
methods:{
		
        valueChange(event){
          this.message = event.target.value;
        }
      }

v-model是标签的值
v-model其实是 v-bind 和v-on的结合:

  <input type="text" :value="message" @input="message = $event.target.value">

v-model 与radio

<div id="app">
   <label for="male">
   <input type="radio" name="sex" value="男" id="male" v-model="sex"/>男
  </label>
   <label for="female">
   <input type="radio" name="sex" value="女" id="female" v-model="sex" />女
  </label>
   <h2>您选择的性别：{{sex}}</h2>
  </div>
 
  <script>
    const app = new Vue({
      el:"#app",
      data:{
       sex:'男'
      },
      methods:{
        
      }
    })
  </script>

v-model 结合单选框，复选框
radio返回的是布尔值
1.单选框案例：只有同意协议，才能点击下一步

<div id="app">
    <label for="license">
        <input type="checkbox" id="license" v-model="isAgree">同意协议
    </label>
    <button :disabled="!isAgree">下一步</button>
  </div>
  
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        isAgree:false,

      },
      methods:{
        
      }
    })
  </script>

2.多选框案例:选择多个爱好

checkbox返回数组类型

<div id="app">
    <input type="checkbox" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" value="足球" v-model="hobbies">足球
    <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
    <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
    <h2>你选择的爱好：{{hobbies}}</h2>
  </div>
  
  <script>
    const app = new Vue({
      el:"#app",
      data:{
       hobbies:[]

      },
      methods:{
        
      }
    })
  </script>

另一种

<div id="app">
    <label :for="item" v-for="item in orginHobbies">
      <input type="checkbox" :id="item" v-model="hobbies" :value="item">{{item}}
    </label>
    <h2>您选择的爱好:{{hobbies}}</h2>
  </div>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        orginHobbies:['篮球','足球','台球','羽毛球'],
        hobbies:[],
      },
      methods:{
        
      }
    })
  </script>

v-model 结合select （单选、多选）
和checkbox一样，select也分为单选和多选两种情况：
单选：只能选中一个值。
v-model绑定的是一个值
当我们选中option中的一个时，会将它对应的value赋值到v-model绑定的标识符中
案例：select只能选一个水果

<div id="app">
    <select name="fruit" id="" v-model="fruit">
      <option value="苹果">苹果</option>
      <option value="梨">梨</option>
      <option value="葡萄">葡萄</option>
      <option value="香蕉">香蕉</option>
    </select>
    <h2>你选择的水果：{{fruit}}</h2>
  </div>
  
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        fruit:'香蕉',
      },
      methods:{
        
      }
    })
  </script>

多选：可以选中多个值。
v- model绑定的是一个数组
当我们选中option中的多个时，会将选中option的value赋值到v-model绑定的标识符中

选择多个水果

 <div id="app">

    <select name="fruits" v-model="fruits" multiple>
      <option value="苹果">苹果</option>
      <option value="梨">梨</option>
      <option value="葡萄">葡萄</option>
      <option value="香蕉">香蕉</option>
    </select>
    <h2>你选择的水果：{{fruits}}</h2>
  </div>
  
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        fruits:[],
      },
      methods:{
        
      }
    })
  </script>

v-model修饰符
lazy修饰符：v-model.lazy=" "
1.默认情况下，v-model是在input事件中同步输入框的数据的。
2.也就是说，一旦有数据发生改变，对应的data中的数据就会自动发生改变。
3.lazy修饰符可以让数据在失去焦点或者回车时才会更新
number 修饰符 : v-model.number=" "
1.默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
2.但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
3.number修饰符可以让在输入框中输入的内容自动转成数字类型
trim修饰符
1.如果输入的内容收尾有很多空格，通常我们希望将其去除
2.trim修饰符可以过滤内容左右两边的空格

！！！！全部笔记来源王红元老师的教学视频！！！！