02-属性事件过滤双向绑定

es6的对象写法

// 正常的写法
let arr = ['逃课', '打游戏', '欺负小满']
let hobbyDetail = {
    name: "大乔",
    age: 4,
    hobby: arr
}
console.log(hobbyDetail)

// 简写
// 正常的写法
let arr = ['逃课', '打游戏', '欺负小满']
let hobbyDetail = {
    name: "大乔",
    age: 4,
    hobby  // 这里直接放数组
}
console.log(hobbyDetail)




// --------------------   也可以这样
let obj = {
    name: "小满",
    age: 3,
    showName(){
        this.name
    }
}

xm = obj
console.log(xm.name)  // 小满
console.log(obj)  // object

事件指令

如果在事件中触发函数，没有传参数，会自动把事件对象传入。
函数有参数，如果要传入事件，固定写法函数($event)
传入的参数一一对应，就会正常拿到传入的参数进一步操作
多传或少传都不会报错，会得到undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <img src="../day01/homework/img/3.jpg" v-show="isActivate" width="500">
        <button @click="showHide">点我显示隐藏图片</button>
        <h2>事件指令-函数有参数</h2>
        <button @click="handleClick">不传参数，函数有参数</button>
        <br>
        <button @click="handleClick1('大乔')">传入参数，函数有参数，且一一对应</button>
        <br>
        <button @click="handleClick2($event)">传入参数，函数有参数，传入事件对象</button>
        <br>
        <button @click="handleClick3">多传参数，加括号，函数没有参数</button>
        <br>
        <button @click="handleClick4">多传参数，不加括号，函数没有参数</button>
        <br>
        <button @click="handleClick5('小满', '阿珂')">少传参数形参3个，实际给了2个</button>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data:{
            isActivate: true,
            name: '小满'
        },
        methods: {
            showHide(){
                this.isActivate = !this.isActivate
            },
            handleClick(e){
                // 1. 触发事件函数，如果没有传参数，会把当前对象传入
                console.log('不传参数，函数有参数');
                console.log(e)
            },
            handleClick1(e){
                // 2. 触发事件函数，传了参数，会正常使用当前传入的参数
                console.log('传入参数，函数有参数，且一一对应');
                console.log(e)
            },
            handleClick2(event){
                console.log('传入参数，函数有参数，传入事件对象');
                console.log(event)
            },
            handleClick3(x,y,z){
                console.log('多传参数，加括号，函数没有参数');
                console.log(x);
                console.log(y);
                console.log(z);
            },
            handleClick4(x,y,z){
                console.log('多传参数，不加括号，函数没有参数');
                console.log(x);
                console.log(y);
                console.log(z);
            },
            handleClick5(x,y,z){
                console.log('少传参数形参3个，实际给了2个');
                console.log(x);
                console.log(y);
                console.log(z);
            },
        },
    })
</script>
</html>

属性指令

v-bind: 属性前面加上 v-bind: 即可

属性前面加上 : 即可

动态渲染很适合使用属性指令

class属性

这个主要作用是针对已经提前定义好的样式做一个增删，并不是直接去定一个一个额外的。

通过文本操作

直接通过字符串赋值去修改

methods: {
    classText(){
        this.myClass = "box box1 box2 box3"
    }
}

通过列表操作 (❤ ω ❤)推荐

classList(){
	this.myClass = ['box', 'box1', 'box2', 'box3']
},

通过对象操作

classObject(){
    this.myClass = {
        box: true,
        box1: false,
        box2: true,
        box3: true,
        "green-color": true
    }
}

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <style>
        /* magic  */
        div {
            border-radius: 50%;
            margin-left: 20px;
        }
        /* 长宽 */
        .box {
            width: 200px;
            height: 200px;
            
        }
        /* 背景颜色 */
        .box1 {
            background-color: tomato;
        }
        /* 文本大小 */
        .box2 {
            font-size: 20px;
            line-height: 200px;
            font-weight: bold;
            text-align: center;
        }
        /* 盒子位置 */
        .box3 {
            margin: auto;
        }

        /* 新的背景颜色 */
        .green-color {
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="app">
        <div :class="myClass">小满三岁啦</div>
        <button @click="classText">通过文本修改</button>
        <button @click="classList">通过列表修改</button>
        <button @click="classObject">通过对象修改修改</button>
        <button @click="restClass">复位</button>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            myClass: ""
        },
        methods: {
            // 复位默认样式
            restClass(){
                this.myClass = ''
            },
            // 通过文本方式去修改
            classText(){
                this.myClass = "box box1 box2 box3"
            },
            // 通过列表修改
            classList(){
                this.myClass = ['box', 'box1', 'box2', 'box3']
            },
            // 通过对象修改
            classObject(){
                this.myClass = {
                    box: true,
                    box1: false,
                    box2: true,
                    box3: true,
                    "green-color": true
                }
            }

        },

    })
</script>
</html>

style样式

通过文本操作

styleText() {
    this.myStyle = "background-color:tomato; width:200px; height: 200px; margin:auto; text-align:center; line-height:200px"
}

通过列表操作

this.myStyle = [
    // {backgroundColor: "tomato",}  这两个写法是一样的  也就是如果有横杠 -  background-color = backgroundColor  
    // 属性值必须都使用引号 引起来
    { "background-color": "pink" },
    { "width": "300px" },
    { "height": "300px" },
    { "text-align": "center" },
    { "line-height": "300px" }
]

通过对象操作 (❤ ω ❤)推荐

styleObject() {
    this.myStyle = {
        backgroundColor: "orange",
        width: "250px",
        height: "250px",
        margin: "10px auto",
        "text-align": "center",
        "line-height": "250px",
        color: "white"
    }
}

全部代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <style>
        /* magic  */
        div {
            border-radius: 50%;
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div :style="myStyle">小满三岁啦</div>
        <button @click="styleText">通过文本修改</button>
        <button @click="styleList">通过列表修改</button>
        <button @click="styleObject">通过对象修改修改</button>
        <button @click="restStyle">复位</button>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            myStyle: ''
        },
        methods: {
            // 复位
            restStyle() {
                this.myStyle = ''
            },
            // 通过文本修改
            styleText() {
                this.myStyle = "background-color:tomato; width:200px; height: 200px; margin:auto; text-align:center; line-height:200px"
            },
            // 通过列表修改
            styleList() {
                this.myStyle = [
                    // {backgroundColor: "tomato",}  这两个写法是一样的  也就是如果有横杠 -  background-color = backgroundColor  
                    // 属性值必须都使用引号 引起来
                    { "background-color": "pink" },
                    { "width": "300px" },
                    { "height": "300px" },
                    { "text-align": "center" },
                    { "line-height": "300px" }
                ]
            },
            // 通过对象修改
            styleObject() {
                this.myStyle = {
                    backgroundColor: "orange",
                    width: "250px",
                    height: "250px",
                    margin: "10px auto",
                    "text-align": "center",
                    "line-height": "250px",
                    color: "white"
                }
            }
        },
    })
</script>

</html>

特殊情况（上面都都失效再用）Vue.set

<body>
    <div id="app">
        <button @click="VueSET">通过Vue.set去修改</button>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            myStyle: '',
            baseStyle: [
                {"background-color": "pink"},
                {"height": "200px"},
                {"width": "200px"}
            ]
        },
        methods: {
            // 通过VueSET去修改
            VueSET(){
                Vue.set(this.baseStyle, 0, {"background-color": "deeppink"})
            }
        },
    })
</script>

条件渲染 v-if v-else-if v-else

通过一个分数了解即可

/*
	90 <= score <= 100 优秀
	80 <= score < 90 良好
	60 <= score < 80 及格
	score < 60 不及格
*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <h3>成绩是：{{score}}</h3>
        <p v-if="score>=90 && score <=100">优秀</p>
        <p v-else-if="score >= 80 && score < 90">良好</p>
        <p v-else-if="score >= 60 && score < 80">及格</p>
        <p v-else>不及格</p>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            score: 55
        }
    })
</script>
</html>

列表渲染 v-for 别忘记加上:key="key"

如果传入1个值，对象默认遍历的是值，而不是键，其他可以遍历的默认就是单个，比如列表，字符串。

如果要传入两个值，对象中第一个值是值，第二个是键，数组，活着其他可迭代的，第一个是值，第二个是索引。

以后写v-for，都要在标签上加 :key="key" ，key必须唯一，这样做可以提高虚拟dom的替换效率。

<li v-for="item in movies">{{item}}</li>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue2.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
        {{movies}}
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            movies: ["大话西游", "肖申克的救赎", "阿甘正传", "少年时代"]
        }
    })
</script>
</html>

传入两个值

第一个值是索引，这个起名可以随意，一般是建议起名index

<li v-for="(movie, index) in movies">索引 {{index}} -- {{movie}}</li>

全部代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue2.js"></script>
    <style>
        .outer::after,
        .outter::before {
            content: "";
            display: table;
            clear: both;
        }

        .box-left {
            width: 40%;
            float: left;
        }
        .box-right {
            width: 40%;
            float:right;
        }
    </style>
</head>
    

<body>
    <div id="app" class="outer">
        <div class="box-left">
            <h2>遍历列表（数组）</h2>
            <h3>当渲染两个值的时候 index 表示索引，一般放后面</h3>
            <ul>
                <li v-for="(movie, index) in movies">索引 {{index}} -- {{movie}}</li>
            </ul>
            <p>全部电影：{{movies}}</p>
            <hr>
            <h2>遍历对象</h2>
            <p>全部对象{{books}}</p>
            <h3>注意：单独遍历，得到的结果是value，并不是key</h3>
            <ul>
                <li v-for="author in books">喜欢的作者：{{author}}</li>
            </ul>
            <h3>如果要获取到作者以及书籍，第一个是是值，第二个才是键，需要用括号括起来。</h3>
            <ul>
                <li v-for="(value, key) in books" key="key">喜欢的书： {{key}} 作者是： {{value}}</li>
            </ul>
        </div>

        <!-- 右侧盒子 -->
        <div class="box-right">
            <h2>遍历数字</h2>
            <p v-for="num in numbers">{{num}}</p>
            <p v-for="(num, index) in numbers">num:{{num}} -- index:{{index}}</p>
            <h2>遍历字符串</h2>
            <span v-for="line in sentence">{{line}}</span>
            <p v-for="(line, l1) in sentence">文字：{{line}}  索引：{{l1}}</p>
        </div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            movies: ["大话西游", "肖申克的救赎", "阿甘正传", "少年时代"],
            books: { "活着": "余华", "海边的卡夫卡": "村上春树" },
            numbers: 4,
            sentence: "四月是你的谎言"
        }
    })
</script>

</html>

单向数据绑定和双向数据绑定

针对input标签，输入框输入值，js中有对应变量

单向数据绑定：变量修改，页面内容随之修改，页面内容修改，变量内容不会一起修改。

双向数据绑定：互相影响，一起变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <style>
        input[type="text"], label{
            display: block;
            width: 200px;
            height: 40px;
            font-size: 20px;
            line-height: 40px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <label for="single">单向数据绑定</label>
        <input type="text" :value="content" id="single">

        <label for="eachother">双向数据绑定</label>
        <!-- <input type="text" v-model:value="hero" id="eachother"> -->
        <!-- 使用双向绑定的时候 value可以省略，参考下面 -->
        <input type="text" v-model="hero" id="eachother">
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            content: "小满三岁啦",
            hero: "阿珂"
        }
    })
</script>
</html>

事件处理

input 当输入框进行输入的时候触发的事件

change 当元素的值发生改变时，触发的事件

blur 当输入框失去焦点的时候触发的事件

focus 当输入框获得焦点的时候触发的事件

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <style>
        input[type="text"], label{
            display: inline-block;
            width: 200px;
            height: 40px;
            font-size: 20px;
            line-height: 40px;
            text-align: center;
            border: none;
            border-bottom: 1px solid black;
            margin: 10px;
        }

        .pink-background {
            background-color: pink;
            border: 1px solid black;
        }

    </style>
</head>
<body>
    <div id="app">
        <h3>单独演示功能</h3>
        <labe>input事件<input type="text" @input="inputEvent" v-model="inputText">你刚刚输入的是：<span :style="myStyle">{{inputText}}</span></label><br>
        <labe>change事件<input type="text" @change="changeEvent" v-model="changeText">你刚刚输入的是：<span :style="myStyle">{{changeText}}</span></label><br>
        <labe>blur事件<input type="text" @blur="blurEvent" v-model="blurText">系统提示：<span :style="myStyle">{{blurTips}}</span></label><br>
        <labe>focus事件<input type="text" @focus="focusEvent" v-model="focusText" :class="focusStyle">系统提示：<span :style="myStyle">{{focusTips}}</span></label><br>
        <hr>
        </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            // 四个value值
            inputText: "",
            changeText: "我是小满！我三岁啦！",
            blurText: "",
            focusText: "",


            // 后面的提示文本
            blurTips: "",
            focusTips: "",

            myStyle: {"color": "red"},
            focusStyle: ['input["text"]']
        },
        methods: {
            // input事件
            inputEvent(){
                alert("你触发了input事件")
            },
            // change事件
            changeEvent(){
                alert("你触发了change事件")
            },

            // 失去焦点
            blurEvent(){
                this.blurText = ""
                // this.Tips = "你触发了失去焦点事件，输入框内容已清空。"
                this.blurTips = "你触发了失去焦点事件，输入框内容已清空。"
            },
            // 得到焦点
            focusEvent(){
                this.focusStyle = ['input["text"]', "pink-background "]
                this.focusTips = "你触发了得到焦点事件，修改了输入框的样式。"
            }
        },
    })
</script>
</html>

过滤 filter

在JavaScript中，filter方法用于创建一个新数组，其中包含通过指定函数测试的所有元素。这个指定的函数会对数组中的每个元素调用，并返回满足条件的元素组成的新数组。

indexOf 方法用于在数组或字符串中查找指定元素或子字符串，并返回第一个匹配的位置索引。如果没有找到匹配的元素或子字符串，则返回 -1。

所以如果有结果，必定是大于等于0的，通过filter结合indexOf就可以实现过滤了。

过滤出所有带心的字符

// part1
let sentenceArr = ["心", "心语心愿", "真不小心", "愿望", "真心对真心"]
let result = sentenceArr.filter(()=>{
    return true
})
console.log(result);  // 全部结果

// part2
let sentenceArr = ["心", "心语心愿", "真不小心", "愿望", "真心对真心"]
let result = sentenceArr.filter((item)=>{
    if(item.indexOf("心") >= 0){
        return true
    }else{
        return false
    }
})
console.log(result); // ['心', '心语心愿', '真不小心', '真心对真心']

// part3
let sentenceArr = ["心", "心语心愿", "真不小心", "愿望", "真心对真心"]
let result = sentenceArr.filter((item)=>{
    return item.indexOf("心") >= 0
})
console.log(result); // ['心', '心语心愿', '真不小心', '真心对真心']

过滤出等于4个字的字符

let sentenceArr = ["心", "心语心愿", "真不小心", "愿望", "真心对真心"]
let result = sentenceArr.filter((item)=>{
    return item.length === 4;
})
console.log(result);  // ['心语心愿', '真不小心']

includes

includes 是 JavaScript 中的一个数组方法，用于判断数组是否包含特定元素，并返回相应的布尔值。在这种情况下，includes 方法用于检查句子是否包含特定的文本。

// part1
let sentenceArr = ['小满是哪一天', '小满胜万全什么意思', '小满手工粉创始人小满拓', '小满节气的含义是什么', '小满生活', '小满三候读音', '小满三日望麦黄,小满十日满地黄什么意思', '小满三候图片', '小满三鲜是指什么', '满三岁是什么意思', '小孩满三周岁', '满三周岁至六七岁属于什么期', '刚满三岁', '小宝贝三岁啦', '三岁小冲', '小宝已经三岁了', '小朋友三岁啦', '小满三岁啦']
result = sentenceArr.filter((sentence)=> {
    return sentence.includes("三岁")
})
console.log(result); // 所有包含三岁的数组

// part2
let sentenceArr = ['小满是哪一天', '小满胜万全什么意思', '小满手工粉创始人小满拓', '小满节气的含义是什么', '小满生活', '小满三候读音', '小满三日望麦黄,小满十日满地黄什么意思', '小满三候图片', '小满三鲜是指什么', '满三岁是什么意思', '小孩满三周岁', '满三周岁至六七岁属于什么期', '刚满三岁', '小宝贝三岁啦', '三岁小冲', '小宝已经三岁了', '小朋友三岁啦', '小满三岁啦']
result = sentenceArr.filter((sentence)=> sentence.includes("三岁")
                           )
console.log(result); // 所有包含三岁的数组

基于过滤的案例

题目要求：

有这样一个数组，里面包含很多不同的文本，只要在输入框中输入文本，只要文本中包含了输入框的文字，就在下面展示出来，增删文字下面的结果也跟着变动。

// 数组如下
['小满是哪一天', '小满胜万全什么意思', '小满手工粉创始人小满拓', '小满节气的含义是什么', '小满生活', '小满三候读音', '小满三日望麦黄,小满十日满地黄什么意思', '小满三候图片', '小满三鲜是指什么', '满三岁是什么意思', '小孩满三周岁', '满三周岁至六七岁属于什么期', '刚满三岁', '小宝贝三岁啦', '三岁小冲', '小宝已经三岁了', '小朋友三岁啦', '小满三岁啦']

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>

<body>
    <div id="app">
        <label>输入查询的内容：<input type="text" v-model="searchText"></label>
        <ul>
            <li v-for="sentence in filteredSentences">{{ sentence }}</li>
        </ul>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            searchText: "",
            sentenceArr: ['小满是哪一天', '小满胜万全什么意思', '小满手工粉创始人小满拓', '小满节气的含义是什么', '小满生活', '小满三候读音', '小满三日望麦黄,小满十日满地黄什么意思', '小满三候图片', '小满三鲜是指什么', '满三岁是什么意思', '小孩满三周岁', '满三周岁至六七岁属于什么期', '刚满三岁', '小宝贝三岁啦', '三岁小冲', '小宝已经三岁了', '小朋友三岁啦', '小满三岁啦']
        },
        computed: {
            filteredSentences() {
                return this.sentenceArr.filter(sentence => sentence.includes(this.searchText));
            }
        }
    })
</script>
</html>

computed属性

上面的案例使用了computed属性

在Vue.js中，computed 是用来创建计算属性的。计算属性是基于依赖进行缓存的，只有在相关依赖发生改变时才会重新计算。它们通常用于派生或计算基于数据状态的属性，以便在模板中使用。通过使用computed，您可以编写更清晰、可扩展和易读的代码，改善数据显示的方式。这些计算属性可以根据其他可观察对象派生信息，进行惰性评估，并在底层可观察对象发生更改时重新计算。希望这能帮助您更详细地了解computed在Vue.js中的作用。

点我查看

箭头函数

箭头函数是 ES6 中引入的一种新的函数定义方式。它的语法简洁，可以更清晰地表达函数的意图。箭头函数的基本形式是 (参数) => { 函数体 }，其中参数可以是零个或多个，函数体可以是单条语句或代码块。

使用箭头函数时，需要注意以下几点：

隐式返回: 当函数体只有一条语句时，可以省略大括号和 return 关键字，这被称为隐式返回。例如：(x, y) => x + y 等同于 (x, y) => { return x + y; }。
显示返回: 如果函数体包含多条语句，需要使用大括号和 return 关键字来显示返回值。
1. 箭头函数 => 后的 {} 创建了一个新的作用域，而没有 return 语句，函数默认返回 undefined。
this 指向: 箭头函数没有自己的 this，它会捕获所在上下文的 this 值。这意味着在箭头函数内部使用 this 时，它指向的是定义时所在的对象，而不是调用时所在的对象。这一点需要特别注意，因为它与传统函数的 this 行为不同。

案例可以参考includes

回顾数组的相关方法

push(): 用于向数组末尾添加一个或多个元素。
1. 注意：返回的并不是添加后的数据，而是最新数组的长度！
pop(): 用于从数组末尾移除最后一个元素。
1. 返回的是pop后的数据
shift(): 用于从数组头部移除第一个元素。
1. 返回被移除的数据
unshift(): 用于向数组头部添加一个或多个元素。
concat(): 用于连接两个或多个数组。
slice(): 用于从已有的数组中返回选定的元素。
1. 同python中的切片，也是顾头不顾尾
splice(): 用于删除或替换已有元素，或者向数组中添加新元素。
forEach(): 用于对数组中的每个元素执行一次提供的函数。
map(): 用于对数组中的每个元素执行一次提供的函数，并返回一个新数组。
filter(): 用于筛选数组中满足条件的元素，并返回一个新数组。

// splice
let arr = [1, 2, 3, 4, 5];
// 从索引 2 的位置开始删除 2 个元素，并添加新的元素
arr.splice(2, 2, 'a', 'b', 'c');
console.log(arr); // 输出: [1, 2, 'a', 'b', 'c', 5]

// slice
let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(1, 4);
console.log(newArr); // 输出: [2, 3, 4]

forEach 方法用于对数组中的每个元素执行一次指定的函数。这个函数可以接受三个参数：数组元素的值、元素的索引和数组本身。以下是 forEach 方法的基本用法示例：

let arr = [1, 2, 3, 4, 5];
arr.forEach(function(element, index, array) {
  console.log(`Element at index ${index} is: ${element}`);
});

map 方法用于对数组中的每个元素执行一次指定的函数，并返回一个新数组。这个函数可以接受三个参数：元素的值、元素的索引和数组本身。以下是 map 方法的基本用法示例：

let arr = [1, 2, 3, 4, 5];
let newArr = arr.map(function(element, index, array) {
  return element * 2;
});
console.log(newArr); // 输出: [2, 4, 6, 8, 10]

在这个示例中，map 方法对数组 arr 中的每个元素执行了一次指定的函数，函数将每个元素的值乘以 2，并将结果放入新的数组 newArr 中。

今日思维导图

标签：02,console,log,绑定,小满,过滤,let,数组,三岁
From： https://www.cnblogs.com/ccsvip/p/18158697

02-属性事件过滤双向绑定

es6的对象写法

事件指令

属性指令

class属性

通过文本操作

通过列表操作 (❤ ω ❤)推荐

通过对象操作

全部代码

style样式

通过文本操作

通过列表操作

通过对象操作 (❤ ω ❤)推荐

全部代码

特殊情况（上面都都失效再用）Vue.set

条件渲染 v-if v-else-if v-else

列表渲染 v-for 别忘记加上:key="key"

传入两个值

全部代码

单向数据绑定和双向数据绑定

事件处理

全部代码

过滤 filter

includes

基于过滤的案例

computed属性

箭头函数

回顾数组的相关方法

今日思维导图

相关文章

赞助商

阅读排行