python70 前端框架之vue js的集中循环方式、key值的解释、input事件、v-model双向数据绑定、过滤案例、事件修饰符、按键修饰符、表单控制

js的几种循环方式

v-for可以循环的变量

可以循环的：

   数组、数组带索引

   对象、对象带key、value

   字符串

   字符串带索引

   数字、数字带索引

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/vue.js"></script>

    <!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>-->

</head>

<body>

<div class="app">

    <h1>v-for循环数组</h1>

    <span v-for="item in l">{{item}}</span>

    <h2>循环数组带索引</h2>

    <div v-for="(item,index) in l">第{{index + 1}}个，值是：{{item}}</div> <!--index索引可以加数字-->

    <h1>循环对象,默认是value</h1>

    <span v-for="item in info">{{item}}<br></span> <!--加br是为了换行-->

    <h2>循环对象，带key和value</h2>

    <div v-for="(item,key) in info">key值是:{{key}}-----{{item}}</div>

    <h1>循环字符</h1>

    <div v-for="item in s">

        <p v-if="item!=' '">{{item}}</p>

        <br v-else>

    </div>

    <h2>循环字符串---带索引</h2>

    <div v-for="(item,index) in s">

        <p v-if="item!=' '">{{item}}----索引是:{{index}}</p>

        <br v-else>

    </div>

    <h2>循环数字</h2>

    <div v-for="item in 8">{{item}}</div>

    <h2>循环数字   带索引</h2>

     <div v-for="(item,index) in 8">{{item}} ---索引是:{{index}}</div>

</div>

</body>

<script>

    var l1 = [2, 3, 4, 4, 5, 6]

    new Vue({

        el: '.app',

        data: {

            l: [1, 2, 3, 4, 5],

            info: {name: 'lqz', age: 19},

            s: 'hello   world'

        },

        methods: {},

    })

</script>

</html>

js的循环方式

<script>

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

   // var a = [4,5,6,7,8]

    //for(i=0;i<10;i++){

        //for (i=0; i<a.length;i++){

            // console.log(i)

        //   console.log(a[i])

      // }

    //}

    // 2  js 的in循环  拿到的是索引 跟vue的v-for区分

    // var a =[1,5,6,7]

    // for (i in a){

    //     // console.log(i)

    //     console.log(a[i])

    // }

    //3 es 6的语法 of循环

    // var a = [4,5,6,7,8,9]

    // for (item of a){

    //     console.log(item)

    // }

    // 4 数组的方法,forEach可以循环

    // var a = [4,5,6,7,8,9]

    // a.forEach(function(item){

    //     console.log('-----',item)

    // })

    //

    // 5  jq的循环  循环数组,对象   需要导juqery

    var a = [4,5,6,7,8]

    $.each(a,function(index,item){

        console.log(index)

        console.log(item)

    })

</script>

key值的解释

vue的v-for写在标签上，在标签上加一个key，用属性指令绑定一个变量，key的值每次都不一样，这样可以加速虚拟dom的替换，从而提高循环效率，key值必须唯一

<div v-for="item in 8" :key="item">{{item}}</div>

尽量写上

数组，对象的检测与更新

对象，新增一个key-value，发现页面没有变化，以后用Vue.set(this.info,'hobby','篮球')设置一下即可

三种情况，前两种一起用和第三种效果一样 但是必须是改变数据和添加数据同时，如果只是添加数据用第三种

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/vue.js"></script>

<!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>-->

</head>

<body>

<div id="app">

    <h1>循环对象</h1>

  <div v-for="(value,key) in info">

      <h3>key值是：{{key}}</h3>

      <h2>value值是：{{value}}</h2>

      <hr>

  </div>

    <button @click="handleAdd">点我加数据</button>

</div>

</body>

<script>

    var vm =new Vue({

        el:'#app',

        data:{

            info: {name:'lqz',age:19},

        },

        methods:{

            handleAdd(){

                // 页面会变化

                // this.info['name']='彭于晏'

                // 页面不会变 但是值有了

                // this.info['hobby']= '篮球'

                // 遇到数据变了，页面没变的情况，都是用

                Vue.set(this.info,'hobby','篮球')

            }

        },

    })

</script>

</html>

input事件

事件	解释
input	当输入框进行输入的时候，触发的事件
change	当元素的值发生改变时，触发的事件
blur	当输入框失去焦点的时候触发的事件
focus	当获得焦点，触发的事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/vue.js"></script>

    <!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>-->

</head>

<body>

<div class="app">

    <h1>点击事件click</h1>

    <input type="text" @click="handleClick">

    <h1>失去焦点</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>

    new Vue({

        el: '.app',

        data: {},

        methods: {

            handleClick() {

                alert('点了')

            },

            handleBlur() {

                alert('失去焦点')

            },

            handleInput() {

                alert('输入触发')

            },

            handleChange() {

                alert('你变了')

            },

            handleFocus() {

                alert('获得了')

            },

        },

    })

</script>

</html>

v-model双向数据绑定

input 可以输入值，输入后，就被js变量拿到，如果使用 ：value='变量'  这种形式，页面中输入框变化，变量不会变，使用v-model做双向数据绑定

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/vue.js"></script>

    <!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>-->

</head>

<body>

<div class="app">

    <h1>单向数据绑定</h1>

    <input type="text" :value="name">  ---->{{name}}--->单向数据绑定

    <h2>双向数据绑定</h2>

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

</div>

</body>

<script>

    var vm = new Vue({

        el: '.app',

        data: {

            name: 'lqz',

            age: 19

        },

    })

</script>

</html>

过滤案例



箭头函数推导 加过滤案例应用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/vue.js"></script>

    <!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.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 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

    //            this.newDataList = this.dataList.filter((item)=> {

    //                // 判断item在不在myText中

    //

    //                // this 指向问题

    //                // if (item.indexOf(_this.myText) >=0){  //判断输入的值 myText是否在item中

    //                //     return true

    //                // }else{

    //                //     return false

    //                // }

    //

    //                // 上面简写成

    //                return item.indexOf(_this.myText) >=0

    //

    //

    //            })

    //     }

    //  },

    //

    // })

            handleInput(){

               this.newDataList = this.dataList.filter(

                   item =>  item.indexOf(this.myText) >= 0

               )

        }

     },

    })

    // 补充 1数组的过滤方法

    //     var dataList =['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']

    //      var newDataList = dataList.filter(function (item) {

    //         return false  // return true 表示这个值保留, false 表示这个值不要

    //     })

    //     console.log(newDataList)

    // 补充2 字符串的indexOf方法 判断子字符串是否在当前字符串中 如果在返回索引 不在返回-1

    // var s = 'lqz is handsome'

    // var s1 = 'is'

    // var i = s.indexOf(s1)

    // console.log(i)

    // 补充3 es6 的箭头函数写法 --》函数中套函数 this指向问题，有了箭头函数 箭头函数没有自己的this

   // 1 无参数 没有返回值的 箭头函数

    // var f = () => {

    //     console.log('函数')

    // }

    //2 有一个值 没有返回值的 箭头函数  括号可以去掉

    // var f = item => {

    //     console.log(item)

    // }

    // 3. 有多个参数 没有返回值的 箭头函数  括号不能去掉

    // var f = (item,key) => {

    //     console.log(item)

    // }

    // 4.有一个参数，一个返回值

    // var f = (item)=> {

    //     return item + 'lqz'

    // }

    // var f = item=> {

    //     return item + 'lqz'

    // }

    var f = item => item + 'lqz'

    var res= f('lqz')

    console.log(res)

    // f('lqz')

</script>

</html>

事件修饰符

事件修饰符	释义
.stop	只处理自己的事件，子控件冒泡的事件不处理（阻止事件冒泡）
.self	只处理自己的事件，子控件冒泡的事件不处理
.prevent	阻止a链接的跳转
.once	事件只会触发一次（适用于抽奖页面）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/vue.js"></script>

</head>

<body>

<div>

    <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>

    var vm = new Vue({

        el: '.app',

        data: {},

        methods: {

            handleLi() {

                console.log('li被点击了')

            },

            handleUl() {

                console.log('ul被点击了')

            },

            handleA() {

                console.log('a标签被点了')

                // 阻止a的跳转，自己决定要不要跳

                // 手动指定跳

                location.href = 'http://www.cnblogs.com'

            },

            handleClick() {

                console.log('我被点了')

            }

        }

    })

</script>

</html>

按键修饰符

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

@keyup = "handleKeyUP"

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

@keyup.enter

@keyup.13

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/vue.js"></script>

    <!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>-->

</head>

<body>

<div class="app">

<!--    <input type="text" v-model="text" @keyup="handleKeyUp">--&ndash;&gt;{{text}}-->

<!--        <input type="text" v-model="text" @key.13="handleKeyUp2">--&ndash;&gt;{{text}}-->

    <input type="text" v-model="text" @keyup.enter="handleKeyUp2(1,$event)">---->{{text}}

</div>

</body>

<script>

    new Vue({

        el: '.app',

        data: {

            text: '',

        },

        methods: {

            handleKeyUp(event) {

                // console.log('按键被按下了')

                // keyCode 对照表 https://blog.csdn.net/zqian1994/article/details/109486445

                // console.log('按钮被按下了：', event.key, event.keyCode)

                if (event.keyCode == 13){

                    console.log('开始跟后端交换搜索了')

                }

            },

        handleKeyUp2(a,event) {

            console.log(event)

            console.log('enter被按了')

        }

      },

    })

</script>

</html>

巴特西

python70 前端框架之vue js的集中循环方式、key值的解释、input事件、v-model双向数据绑定、过滤案例、事件修饰符、按键修饰符、表单控制

js的几种循环方式

v-for可以循环的变量

js的循环方式

key值的解释

数组，对象的检测与更新

input事件

v-model双向数据绑定

过滤案例

事件修饰符

按键修饰符

最新文章

热门文章