vue.js 指令（超级详细带案例版）

橘子海326

1334人浏览 · 2024-12-18 10:52:13

橘子海326 · 2024-12-18 10:52:13 发布

单元一 vue.js 指令

学习目标

指令是指带有v-前缀的特殊属性，他们会在Vue实例挂载的DOM元素上应用特殊的响应性行为。常用的指令有：

（1）v-bind

（2）v-on

（3）v-for

（4）v-if

（5）v-else;

（6）v-model

任务一 v - bind指令

1.1 任务描述

用于动态地绑定一个或多个属性，或者绑定一个组件 prop 到表达式。可以缩写为:。

1.2 任务实施

  <div id="app">

    <img :src="imageSrc" :alt="imageAlt">

</div>

<script>

    var app = new Vue({

        el: '#app',

        data: {

            imageSrc: 'https:/照片链接  ',

            imageAlt: '示例图片'

        }

    });

任务二 v - on 指令

2.1任务描述

用于监听 DOM 事件，并在触发事件时执行JS 代码，可以缩写为@。

2.2 任务实施

<div id="app">

  <input type="button" value="事件绑定" @click="todo"> //单击

  <input type="button" value="事件绑定" @mouseenter="todo"> //移入

  <input type="button" value="事件绑定" @dblclick="todo">//双击

</div>

<script>

  var  app = new Vue({

            el:"#app",

            data:{

                  name:'周杰伦'

                          },

            methods:{

                  todo:function() {

                  alert('歌手：'+this.name)

      }

    }

  })

</script>

事件绑定

这里在视频里就能看出来他的监听作用，和我们在前面学过的监听事件是差不多原理的。

任务三 v – for指令

3.1任务描述

用于基于一个数组或者对象来循环渲染一个元素或一组元素

在JS中一般使用for循环，使用i++把整个数组渲染出来，而Vue则是简化一下这个方法，相当于将item变成一个变量。自动实行item++操作；也就是接口已经写好了，自动将数组里面的值赋给变量item

3.2 任务实施

<div id="app">

  <div v-for="(item,index) in list" data-id=“index">

    索引是：{{index}}，元素内容是：{{item}}

  </div>

</div>

<script>

  var vm = new Vue({

    el: '#app',

    data: {

      list: [1, 2, 3]

    }

  })

</script>

除了对数组进行迭代外，v-for 还可以对对象进行迭代。在对象迭代中，可以使用 v-for 指令中的第二个和第三个参数 key 和 value 来获取当前迭代的键和值。

<h3>sɪᴅɪᴏᴛ 的自我介绍：</h3>

  <div id="app">

      <ul>

            <li v-for="(value, key) in person">

                {{ key }} - {{ value }}

            </li>

        </ul>

  </div>

  <script>

    const app = new Vue({

        el: '#app',

        data: {

            items: ['唱', '跳', 'rap', '篮球'],

            person: {

                "名字": "sɪᴅɪᴏᴛ",

                "年龄": 18,

                "爱好": "篮球"

            }

        }

    })

</script>

练习：指令v-for与v-on简单应用（学生列表）

<!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="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

</head>

<body>

    <div id="app">

        <button @click="add">添加</button>

        <button @click="del">删除</button>

        <table>

            <tr>

                <th>班级</th>

                <th>姓名</th>

                <th>性别</th>

                <th>年龄</th>

            </tr><tr v-for="item in students">

                <td>{{item.grade}}</td>

                <td>{{item.name}}</td>

                <td>{{item.gender}}</td>

                <td>{{item.age}}</td>

              </tr>

        </table>

    </div>

    <script>

        var vm=new Vue({

            el:'#app',

            data:{

                students:[]

            },

            methods:{

                add(){

                    var student={

                        grade:'1',

                        name:'张三',

                        gender:'男',

                        age:20

                    }

                    this.students.push(student)

                },

                del(){

                    this.students.pop()

                }

            }

        })

    </script>

</body>

</html>

运行结果：

列表

任务四 v-if 指令

4.1任务描述

v-if 指令用于条件性地渲染一块内容，例如在其他语言中，学过 if 语句吧，对一个条件进行一个判断，进而做下一步的内容；var a = 2 ; if ( a > 1 ) { console.log( ''显示内容" ); } ,a>1，那么控制台会出现"显示内容"，v-if 指令也是在表达式显示为真值的时候才会渲染对应的内容。

4.2 任务实施

<div id="app">

  <div v-if="isShow">

      显示内容

  </div>

</div>



<script type="text/javascript">

  var vm = new Vue({

      el:'#app',

      data:{

          isShow:false

      }

  })

</script>

当isShow等于true时，就会在页面内出现“显示内容”；等于false时，页面是空白的。

如果需要渲染很多内容的话，在div里面的写法有很多种

<div v-if="isShow">显示内容</div>

    <div v-if="isShow">显示内容</div>

    <div v-if="isShow">显示内容</div>

如果显示内容多了需要大量使用 v-if = "isShow"，每一个盒子都给到。

<div v-if="isShow">

        <div>显示内容</div>

        <div>显示内容</div>

        <div>显示内容</div>

    </div>

虽然只需要一个div标签包裹起来后就可以进行控制，但它会破环原先的UI结构，假设页面当中的样式等代码都已经完成了，但突然加进去一个div标签后我的页面结构就崩掉了

那么这时候就需要用v-if与<template>的结合使用了。

<template v-if="isShow">

        <div>显示内容</div>

        <div>显示内容</div>

        <div>显示内容</div>

    </template>

任务五 v- else指令

5.1 任务描述

`v - else`指令必须紧跟在`v - if`或`v - else - if`指令之后，用于在`v - if`条件不成立时渲染对应的元素。

5.2 任务实施

<div id="app">

    <p v-if="isLoggedIn">欢迎回来，已登录用户！</p>

    <p v-else>请先登录哦。</p>

</div>

<script>

  var app = new Vue({

    el: '#app',

    data: {

      isLoggedIn: false

    }

  });

</script>

False显示请先登录的文本；true就显示欢迎回来文本。

也可以根据输入框的内容进行判断

  <div id="app">

    <input type="text" v-model="inputValue">

    <p v-if="inputValue.length >= 6">输入的内容长度符合要求。</p>

    <p v-else>输入的内容长度不足，请至少输入6个字符哦。</p>

  </div>

  <script>

    var app = new Vue({

      el: '#app',

      data: {

        inputValue: ""

      }

    });

  </script>

v-else 还可以和 v-else-if 一起配合 v-if 构建更复杂的条件判断逻辑

  <div id="app">

    <div v-if="score >= 90">优秀，成绩等级为A</div>

    <div v-else-if="score >= 80">良好，成绩等级为B</div>

    <div v-else-if="score >= 60">及格，成绩等级为C</div>

    <div v-else>不及格，成绩等级为D</div>

  </div>

  <script>

    var app = new Vue({

      el: '#app',

      data: {

        score: 75  //修改分数显示对应的等级

      }

    });

  </script>

任务六 v-model 指令

6.1 任务描述

用于在表单元素（如 <input>、<textarea>、<select>）和组件上创建双向数据绑定。

6.2 任务实施

6.2.1 案例一：列表任务

<div id="app">

            <input placeholder="请输入内容" type="text" v-model="title" @keyup.enter="onEnter">

            <hr>

            <ul>

                <!-- 条件渲染 -->

                <li v-if="todos.length===0">无任务</li>

                <li v-else v-for="item,index in todos" :key="item.id">

                    <span>{{item.title}}</span>

                    <span @click="del(index)">删除</span>

                </li>

            </ul>

        </div>

        <script>

            const vm = new Vue({

                el: '#app',

                data: {

                    todos: [],

                    title: ''

                },

                methods: {

                    onEnter() {

                        this.todos.push({

                            id: Date.now(),

                            title: this.title

                        })

                        this.title = ''

                    },

                    del(index) {

                        // 删除

                        this.todos.splice(index, 1)

                    }

                }

            })

        </script>

运行效果：

任务

6.2.2 案例二：全选复选框

<div id="app">

            <div>

                <input type="checkbox" v-model="checked" @change="onSelected">

                <hr>

                <ul>

                    <li>

                        <input type="checkbox" value="html" @change="selectlesson" v-model="lessons">html

                    </li>

                    <li>

                        <input type="checkbox" value="css" @change="selectlesson" v-model="lessons">css

                    </li>

                    <li>

                        <input type="checkbox" value="js" @change="selectlesson" v-model="lessons">js

                    </li>

                </ul>

                <hr>

                <div>{{lessons}}</div>

            </div>

        </div>

        <script>

            const vm = new Vue({

                el: '#app',

                data: {

                    lessons: [],

                    checked: false

                },

                methods: {

                    onSelected(evt) {

                        if (evt.target.checked) {

                            this.lessons = ["js", 'html', 'css']

                        } else {

                            this.lessons = []

                        }

                    },

                    selectlesson() {

                        this.checked = this.lessons.length == 3

                    }

                }

            })

        </script>

运行结果:

全选

6.2.3 案例三：；下拉单选

  <div id="app">

            <div>

                <h3>{{sex}} -- {{city}}</h3>

                <label>

                    <input type="radio" value="先生" v-model="sex">建行

                </label>

                <label>

                    <input type="radio" value="女神" v-model="sex">招行

                </label>

            </div>

            <hr>

            <div>

                <select v-model="city">

                    <option value="0">==选择==</option>

                    <option value="wh">芜湖</option>

                    <option value="bj">北京</option>

                </select>

            </div>

        </div>

        <!-- 第3步：实例化vue -->

        <script>

            const vm = new Vue({

                el: '#app',

                data: {

                    sex: '先生',

                    city: '0'

                }

            })

        </script>

运行结果：

建行

6.2.4 v-model修饰符

(1) lazy：延时更新数据源中的数据，失去焦点时触发更新。

(2) trim：自动过滤用户输入的首尾空白字符。

(3) number：输入值转为数值类型。

6.2.5 购物车案例：

 <div id="app">

            <table border="1" width="600">

                <tr>

                    <th>序号</th>

                    <th>名称</th>

                    <th>单价</th>

                    <th>数量</th>

                    <th>操作</th>

                </tr>

                <tr v-for="item,index in carts">

                    <td>{{index+1}}</td>

                    <td>{{item.name}}</td>

                    <td>{{item.price}}</td>

                    <td>

                        <button @click="setNum(1,index)">+++</button>

                        <input type="number" v-model="item.num">

                        <!-- <button @click="setNum(-1,item)">---</button> -->

                        <button @click="setNum(-1,index)">---</button>

                    </td>

                    <td>

                        <button @click="del(index)">删除</button>

                    </td>

                </tr>

            </table>

            <hr>

            <h3>

                合计：

                {{totalPrice()}}

            </h3>

        </div>

        <script>

            function getCarts() {

                return !window.localStorage.getItem('carts') ? [{ id: 1, name: '小米12pro', price: 1, num: 1 },

                                                                { id: 2, name: '华为手机', price: 2, num: 1 },

                                                                { id: 3, name: '水果手机', price: 3, num: 1 }] : JSON.parse(window.localStorage.getItem('carts'))

            }

            function setCarts(carts) {

                window.localStorage.setItem('carts', JSON.stringify(carts))

            }

            const vm = new Vue({

                el: '#app',

                data: {

                    carts: getCarts()

                },

                methods: {

                    setNum(n, index) {

                        this.carts[index].num += n

                        if (this.carts[index].num <= 1) this.carts[index].num = 1

                        if (this.carts[index].num >= 3) this.carts[index].num = 3

                        // this.carts[index].num = Math.min(3, Math.max(1, this.carts[index].num))

                        setCarts(this.carts)

                    },

                    totalPrice() {

                        return this.carts.reduce((prev, { price, num }) => {

                            prev += price * num

                            return prev

                        }, 0)

                    },

                    del(index) {

                        if(confirm('确定删除')){

                            this.carts.splice(index, 1)

                            setCarts(this.carts)

                        }

                    }

                }

            })

        </script>

运行结果：

购物车

总结

你学会了吗，要学到东西哦

腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

腾讯云开发者社区

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git