Welcome to kimi's blog

Vue的点击事件、单表控制、过滤事件、js的几种循环方式

目录

Vue的基础操作

vue的样式----element

js的几种循环方式

v-for可以循环的变量

js可以循环数组、对象、字符串、数字。

循环对象 例子
数组：l:[11,22,33,44,55] <span v-for="item in l"> {{item}}</span>
数组带索引 <p v-for="(item,index) in l"> 第{{index+1}}个的值是：{{item}}</p>
对象:info:{name:'kiki',age:19} <p v-for="item in info"> {{item}}</p>
对象带索引 <p v-for="(item,index) in info"> key:{{index}}---->value:{{item}}</p>
字符串:string:'hi,my good friend' <span v-for="item in string"> {{item}}</span>
索引带索引 <span v-for="(item,index) in string> {{item}}</span>
数字 8 <span v-for="item in 8">{{item}}</span>
数字带索引 <p v-for="(item,index) in 8">{{item}}--->索引{{index}}</p>
点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div class="app">
        <h2>v-for循环数组</h2>
        <span v-for="item in l"> {{item}}</span>

        <h2>v-for循环数组带索引</h2>
        <p v-for="(item,index) in l"> 第{{index+1}}个的值是：{{item}}</p>

        <h2>v-for循环对象，默认是value值</h2>
        <p v-for="item in info"> {{item}}</p>
        <h2>v-for循环对象，带key和value</h2>
        <p v-for="(item,index) in info"> key:{{index}}---->value:{{item}}</p>

         <h2>v-for循环字符串</h2>
        <span v-for="item in string"> {{item}}</span>
        <div v-for="item in string"> <!--空格也要循环出来--加if判断-->
            <span v-if="item!=' '">{{item}}</span>
            <br v-else>
        </div>
        <h2>v-for循环字符串带索引</h2>
        <div v-for="(item,index) in string">
            <span v-if="item!=' '">{{item}}--->索引{{index}}</span>
            <br v-else>
        </div>

        <h2>循环数字</h2>
        <span v-for="item in 8">{{item}}</span>

        <h2>循环数字带索引</h2>
        <p v-for="(item,index) in 8">{{item}}--->索引{{index}}</p>
        
    </div>

</body>
    <script>
        new Vue({
            el:".app",
            data:{
                l:[11,22,33,44,55],
                info:{name:'kiki',age:19},  //想要循坏数组，数组要提前定义，不能使用data里面的数组
                string:'hi,my good friend'
            },
            methods:{},
        })
    </script>
</html>

js的循环方式

python 没有基于索引的循环，python都是基于迭代的循环

基于索引的循环

    var a= [12,13,14,15,16]
    for(i=0;i<2;i++){
      for(i=0;i<a.length;i++){
        // console.log(i)  <!--0 1 2 3 4 -->
          console.log(a[i]) <!--12 13 14 15 16 -->
      }

基于in的循环

in拿到的是索引 ，vue的v-for拿到的是值

    var a= [12,13,14,15,16]
    for(i in a){
        // console.log(i) // 0 1 2 3 4
        console.log(a[i])  <!--12 13 14 15 16 -->
    }

es6 语法 of 循环

    var a= [12,13,14,15,16]
    for(item of a){
        console.log(item) <!--12 13 14 15 16 -->
    }

数组循环---forEach

    var a= [12,13,14,15,16]
	<!--每循环一个值交给item，再交给函数执行 -->
    a.forEach(function (item){
        console.log(item) <!--12 13 14 15 16 -->
    })

jquery循环---数组和对象

    var a= [12,13,14,15,16]
    <!--每循环a一个值交给匿名函数执行 -->
    $.each(a,function (index,item){
        console.log(index) //  0 1 2 3 4
        console.log(item) // 12 13 14 15 16
    })

key值的解释

v-for放在标签上，其实标签上还可以放key，但是key值必须是唯一，不然就程序报错，用属性指令绑定一个变量，key的值每次都不一样，这样可以加速虚拟DOM的替换从而提高循环效率，想要专业一些那就尽量写这个方式。

 <div v-for="item in 8" :key="item">{{item}}</div>
// 尽量要写key值，这样虚拟dom每次操作的根据变动的key值做监听

数组，对象的检测与更新

对象，新增一个键值对(key-value)，发现页面没有变化，可以使用Vue.set(this.info)

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div class="app">
      <h1>循环对象</h1>
      <div v-for="(value,key) in info">
        <p>key的值：{{key}}</p>
        <p>value的值：{{value}}</p>
      </div>
      <hr>
      <button @click="handleAdd">添加数据</button>

    </div>

</body>
<script>
          new Vue({
            el:".app",
            data:{
                info:{name:'kiki',age:19},
            },
            methods:{
              handleAdd(){
                //页面会变化-----改变原有的值
                // this.info['name']='kimi'
                //页面不会变----添加新的值，值有了，但页面不会变
                // this.info['hobby']='篮球'

                //遇到数据变了，页面没变的情况，都是用
                Vue.set(this.info,'hobby','篮球')
              }
            },
        })
</script>

</html>

image

input事件

点击事情

通过对input框的属性进行绑定事件，但对input进行操作时会触发相应的事件。

事件 释义
click 点击事件 <input type="text" @click="handleClick">
input 当输入框进行输入的时候 触发的事件 <input type="text" @input="handleInput">
blur 当输入框失去焦点的时候 触发的事件 <input type="text" @blur="handleBlur">
change 当元素的值发生改变时 触发的事件 <input type="text" @change="handleChange">
focus 当获得焦点，触发事件 <input type="text" @focus="handleFocus">
点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div class="app">

    <h1>点击事件click</h1>
    <input type="text" @click="handleClick">

    <h1>失去焦点事件blur</h1>
    <input type="text" @blur="handleBlur">

    <h1>input事件，只要输入，就会触发</h1>
    <input type="text" @input="handleInput">

    <h1>change事件</h1>
    <input type="text" @change="handleChange">

    <h1>focus事件</h1>
    <input type="text" @focus="handleFocus">
  </div>
</body>
<script>
   var vm = new Vue({
     el:'.app',
     data:{},
     methods:{
       handleClick(){
         alert('点击事件')
       },
       handleBlur(){
         console.log('失去焦点了')
       },
       handleInput(){
         console.log('input输入框被点')
       },
       handleChange(){
         console.log('chang事件--我改变了')
       },
       handleFocus(){
         console.log('获得了焦点')
       }
     }
   })
</script>
</html>

v-model双向数据绑定

单向数据绑定 :value='变量' <input type="text" :value="name">
双向数据绑定 v-model='变量' <input type="text" v-model="age">---{{age}}

input框的vulue 值是单向数据绑定，输入框输入值后，值就会被js变量拿到。input框使用:value='变量'这种形式，页面输入框变化，变量不会变，但使用v-model` 做双向数据绑定，输入框输入数据，变量也会跟着变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
  <div class="app">
    <h1>单向数据绑定</h1>
    <input type="text" :value="name">---{{name}}--->单向数据绑定

    <h1>双向数据绑定</h1>
    <input type="text" v-model="age">---{{age}}--->单向数据绑定
  </div>

</body>
<script>
  var vm = new Vue({
    el:'.app',
    data:{
      name:'kiki',
      age:18
    }
  })
</script>
</html>

v-model进阶

v-model双向数据绑定，还可以对输入框数据进行一定的限定。

v-modle. 释义
lazy 等待input框的数据绑定时区焦点之后再变化
number 以数字开头并只保留后面的数字，不保留字母；字母开头都保留
trim 去除首位的空格 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
 <div class="app">
     <h1>lazy</h1>
     <input type="text" v-model.lazy="myText">---{{ myText }}

     <h1>number</h1>
     <input type="text" v-model.number="myNumber">---{{ myNumber }}

          <h1>trim</h1>
     <input type="text" v-model.trim="myTrim">---{{ myTrim }}

 </div>

</body>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            myText:'',
            myNumber:'',
            myTrim:'',
        }

    })

</script>

</html>

image

单表控制

text\radia\checkbox

input的变量类型有text、radio(单选)、checkbox(单选和多选)

点击查看代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
      <script src="vue.js"></script>

</head>
<body>
  <div class="app">
    <p>用户名：<input type="text" v-model="username"></p>
    <p>密码：<input type="password" v-model="password"></p>
    <p>性别：
      男：<input type="radio" v-model="gender" value="1">
      女：<input type="radio" v-model="gender" value="2"></p>
      <p>记住密码：
          <input type="checkbox" v-model="remember">
      </p>

      <p>爱好：
        旅游：<input type="checkbox" v-model="hobby" value="旅游">
        美食：<input type="checkbox" v-model="hobby" value="美食">
        运动：<input type="checkbox" v-model="hobby" value="运动">
      </p>
      <button @click="handleClick">登录</button>

  </div>

</body>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            username:'',
            password:'',
            gender:'',// radio单选，多个radio绑定同一个变量，选中某个，就对应value值
            remember:false,// checkbox 单选是true或false
            hobby:[],// checkbox 多选是数组类型，必须一开始定义就是数组，多个checkbox绑定一个变量

        },
        methods:{
            handleClick(){
                console.log(this.username,this.password,this.gender,this.remember,this.hobby)
            }
        }
    })

</script>
</html>

image

过滤事件

只有数组有过滤器，根据输入框输入的内容对目标数组进行条件过滤，只显示想要的数组内容。代码如下

点击查看代码 

每次循环一次给函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div class="app">
    <h1>过滤案件</h1>
    <p>请输入要搜索的内容：<input type="text" v-model="myText" @input="handleInput"></p>

    <ul>
<!--      <li v-for="item in dataList"> {{item}}</li> //由于dataList做了筛选，每次的值都会变，导致输入框回退时数组里面的信息已经被筛选了-->
      <li v-for="item in newDataList"> {{item}}</li>
    </ul>
  </div>
</body>
<script>
  var vm = new Vue({
    el:'.app',
    data:{
      myText:'',
      dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
      newDataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],

    },
    methods:{
      handleInput(){
        // var _this = this
        // console.log(this.myText)  // 打印myIext的值
        // this.newDataList=this.dataList.filter(item =>{
          // 判断item在不在myText
          //this指向问题
          // 判断输入的值myText是否在item中

          // if (item.indexOf(_this.myText) >=0){
          //   return true
          // }else{
          //   return false
          // }
          //简写
          // return item.indexOf(this.myText)>=0

        // })

        this.newDataList=this.dataList.filter(
                item=> item.indexOf(this.myText)>=0
        )
      }
    }
  })
  </script>
</html>

采用计算computed属性进行过滤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
      <script src="./vue.js"></script>
</head>
<body>
  <div class="app">
    <h1>过滤案件</h1>
    <p>请输入要搜索的内容：<input type="text" v-model="myText" ></p>
    <ul>
      <li v-for="item in newList"> {{item}}</li>
    </ul>
  </div>

</body>

<script>
  var vm = new Vue({
    el:'.app',
    data:{
      myText:'',
      dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
    },
    methods:{
      },
        computed:{
          newList(){
              return this.dataList.filter(item=>item.indexOf(this.myText)>=0)
          }
        },

  })
  
</script>
</html>

image

补充知识

  //补充1： 数组的过滤方法
  // var dataList=['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
  // var newDataList=dataList.filter(function (item){
  //   return true  // return true表示这个值保留 ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
  //   return false // return true表示这个值不要 []
  // })
  // console.log(newDataList)


    //补充1： 字符串的indexOf方法，判断子字符串是否在当前字符串中,如果在返回的是索引，如果不在返回-1
  // var s = 'English language or literature as a subject of study'
  // var s1='language'
  // var s2='kiki'
  // var i = s.indexOf(s1)
  // var k =s.indexOf(s2)
  // console.log(i)  //索引8
  // console.log(k)  //-1

   // 补充3 ：es6 的箭头函数写法---》函数中套函数，this指向有问题，有了箭头函数，箭头函数没有自己的this，用的都是上一级的this

  //1.无参函数，无返回值箭头函数
  // var f = () =>{
  //   console.log('函数')
  // }
  // f('123')  // 函数

    // 2. 有一个参数，没有返回值的箭头函数，括号可以去掉，也可加()
  //   var f = item =>{
  //   console.log(item)
  // }
  //   f('123')  //123

  // 3. 有多个参数，没有返回值的箭头函数  括号不能去掉
  //   var f = (item,value) =>{
  //   console.log(item)
  // }
  //   f('123')  // 123

    // 4. 有一个参数，一个返回值
  //   var f = (item) =>{
  //   return item+'kiki'
  // }
  //   f('123')  // 123

  //   var f = (item) =>{
  //   return item+'kiki'
  // }
  //   f('123')  // 123

  // 简写
  var f = item =>item + 'kiki'
  var res = f('kimi')
  console.log(res)

事件修饰符(了解)

就是对click事件的修饰，针对父标签和子标签里面的事件，当子标签里面的点击事件被点击了，同时会传给父标签的点击事件，引发点击事件的触发，称为冒泡事件。

事件修饰符 释义
.stop 只处理自己的事件，子控件冒泡的事件不处理（阻止事件冒泡）
.self 只处理自己的事件，子控件冒泡的事件不处理
.prevent 阻止a链接的跳转
.once 事件只会触发一次（适用于抽奖页面）
image
点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="vue.js"></script>
</head>
<body>
<div class="app">
        <h1>事件修饰符stop，子控件不再冒泡给父控件</h1>
        <ul @click='handleUl'>
            <li @click.stop="handleLi">第一</li>
            <li>第二</li>
        </ul>

      <h1>事件修饰符self:只处理自己的事件，子控件的冒泡，不处理父标签的</h1>
        <ul @click.self='handleUl'>
            <li @click="handleLi">第一</li>
            <li>第二</li>
        </ul>
          <h1>prevent阻止a的跳转</h1>
        <a href="http://www.baidu.com" @click.prevent="handleA">百度</a>

        <h1>once 只响应一次</h1>
        <button @click.once="handleClick">点我抽奖</button>
    </div>
</div>

</body>
<script>
   new Vue({
     el:'.app',
     data:{},
     methods:{
      handleLi(){
        console.log('li被点击了')
      },
       handleUl(){
        console.log('ul被点击了')
      },
       handleA(){
        console.log('a标签被点了')
         // 阻止a的跳转，自己决定要不要跳prevent
         //手动指定跳转
         location.href = 'http://www.cnblogs.com'

       },
       handleClick(){
        console.log('我被点了')
       }
     }
   })
</script>

</html>

按键修饰符

按键事件：按了键盘某个键，就会触发函数的执行

@keyup="handleKeyUp"

按键修饰符：只有某个按键被按下才触发

@keyup.enter
@keyup.13     
# keyCode 对照表

keyCode对照表

handleKeyUp2(1,$event)是可以带参数传的，但是一定要一一对应的。
image

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>

</head>
<body>
    <div class="app">
      <input type="text" v-model="text" @keyup="handleKeyUp">--{{text}}
      <input type="text" v-model="text" @keyup.13="handleKeyUp">--{{text}}
      <input type="text" v-model="text" @keyup.enter="handleKeyUp2(1,$event)">--{{text}}
    </div>

</body>
<script>
  var vm = new Vue({
    el:'.app',
    data:{
      text:''
    },
    methods:{
      handleKeyUp(event){
        // console.log('按键被按下了')
        // console.log('按键被按下了',event.key,event.keyCode)
        if(event.keyCode==13){
          console.log('开始和后端交换搜索了')
        }},

        handleKeyUp2(a,event){
          console.log(a,event)
          console.log('event被按了')
      }
    }
  })
</script>
</html>

image

箭头函数

image

python的海象运算符

海象运算符可以比较两个对象的大小，并返回一个布尔值（true或false),还可以比较数字、字符串、列表和字典等对象的大小。

形式：$$a \oplus b$$

其中$a$和$b$分别表示两个对象，$\oplus$表示海象运算符。

  • $a$大于$b$,则返回True,否则返回False

    注意：数字、字符串、列表和字典和上述同理

posted @   魔女宅急便  阅读(24)  评论(0)  编辑  收藏  举报
相关博文：
· vue生命周期和vue组件
· Vue高级
· vue js循环方式 input事件 v-model双向数据绑定 过滤案例 事件修饰符 按键修饰符 表单控制
· Vue框架：3、JS的几种循环方式，Key值的解释，数组/对象的检测与更新，input事件，v-model数据双向绑定，过滤案例，事件修饰符，按键修饰符，表单控制
· vue---day03（js的几种循环方式,key值的解释,数组与对象的检测与更新，input事件，过滤案例，v-model双向数据绑定，事件修饰符，按键修饰符，表单控制）
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
Title
点击右上角即可分享
微信分享提示

目录导航