Vue的内置指令

已于 2022-12-05 21:19:07 修改
阅读量1.7k 收藏 2
点赞数
分类专栏： Vue 文章标签： vue.js
于 2022-03-22 14:15:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46612221/article/details/123581014
版权

Vue内置指令

1 v-show：根据表达式的真假值来显示和隐藏元素

v-show根据表达式的真假值来显示和隐藏元素，它通过样式的display控制标签的显隐。

在下面的示例中，第一个p标签不设置该属性，第二个p标签设置v-show为true，第三个p标签设置v-show为false，最后的结果是显示前两个p标签，第三个不显示，示例代码如下：

<div id="app">
    <p>我是橘猫吃不胖</p>
    <p v-show="show">AAAAA</p>
    <p v-show="hide">BBBBB</p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            show: true, // 显示AAAAA
            hide: false // 隐藏AAAA
        }
    })
</script>

在这里插入图片描述
除此之外，可以动态的修改v-show的属性值，示例代码如下：

<div id="app">
    <p>我是橘猫吃不胖</p>
    <p v-show="show">AAAAA</p>
    <p v-show="hide">BBBBB</p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            show: true,
            hide: false
        }
    })
    // 每隔1秒修改hide的值，达到在屏幕上闪烁的效果
    window.setInterval(function () {
        vm.hide = !vm.hide
    }, 1000)
</script>

请添加图片描述

2 v-html：插入标签

v-html会向指定节点中渲染包含html结构的内容，它与插值语法的区别是：v-html会替换掉节点中所有的内容，插值语法则不会，并且v-html可以识别html结构。

示例代码：

<div id="app">
    <div v-html="str"></div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            str: "<h3>橘猫吃不胖</h3>"
        }
    })
</script>

在这里插入图片描述

3 v-text：在元素当中插入值

v-text向其所在的节点中渲染文本内容，它与插值语法{{}}的区别是：v-text会替换掉元素中所有的内容，但是插值语法不会。

示例代码：

<div id="app">
    <!-- 插值语法 -->
    <div>{{name}}</div>
    <!-- 即使元素中有内容，但是仍旧会被替换掉 -->
    <div v-text="name">aaaaaaa</div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            name: "橘猫吃不胖"
        }
    })
</script>

在这里插入图片描述

4 v-if和v-else：根据表达式的真假值来动态插入和移除元素

v-if和v-else可以根据表达式的真假值来动态插入和移除元素。

示例：根据不同的表达式真假值显示不同的效果，当role设置为0的时候，显示超级管理员

<div id="app">
    <p v-if="role == 0">超级管理员</p>
    <p v-else-if="role == 1">普通管理员</p>
    <p v-else>账户已停用</p>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            role: 0 // 设置role的值
        }
    })
</script>

在这里插入图片描述
当设置role为1时，显示普通管理员

<div id="app">
    <p v-if="role == 0">超级管理员</p>
    <p v-else-if="role == 1">普通管理员</p>
    <p v-else>账户已停用</p>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            role: 1 // 设置role的值
        }
    })
</script>

在这里插入图片描述
当role不为0或者1时，显示账户已停用

<div id="app">
    <p v-if="role == 0">超级管理员</p>
    <p v-else-if="role == 1">普通管理员</p>
    <p v-else>账户已停用</p>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            role: 3 // 设置role的值
        }
    })
</script>

在这里插入图片描述

5 v-for：根据变量的值来循环渲染元素

v-for可以根据变量的值来循环渲染元素。

示例：v-for指令遍历数组

<div id="app">
    <span v-for="i in arr"> {{ i }} </span>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            arr: [11, 22, 33, 44] // 定义arr数组
        }
    })
</script>

在这里插入图片描述
示例：v-for遍历数组及数组中元素的索引

<div id="app">
    <span v-for="(i , index) in arr"> {{ index }} : {{ i }} </span>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            arr: [11, 22, 33, 44] // 定义arr数组
        }
    })
</script>

在这里插入图片描述
示例：v-for指令遍历对象

<div id="app">
    <span v-for="i in obj"> {{ i }} </span>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            obj: { // 定义对象
                "a": 1,
                "b": 2,
                "c": 3
            }
        }
    })
</script>

在这里插入图片描述示例：v-for遍历对象的属性名及属性值

<div id="app">
    <span v-for="(item,key) in obj">
        {{ key }}:{{ item }}
    </span>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            obj: { // 定义对象
                "a": 1,
                "b": 2,
                "c": 3
            }
        }
    })
</script>

在这里插入图片描述
示例：v-for遍历对象的索引、属性名及属性值

<div id="app">
    <span v-for="(item,key,index) in obj">
        {{ index }}—{{ key }}:{{ index }}
    </span>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            obj: { // 定义对象
                "a": 1,
                "b": 2,
                "c": 3
            }
        }
    })
</script>

在这里插入图片描述
示例：v-for遍历对象数组

<div id="app">
    <span v-for="item in obj">
        {{ item }}
    </span>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            obj: [
                { name: "张三", age: 20 },
                { name: "李四", age: 21 },
                { name: "王五", age: 22 }
            ]
        }
    })
</script>

在这里插入图片描述
示例：v-for指令遍历对象数组的具体内容

<div id="app">
    <span v-for="item in obj">
        {{ item.name }}
        {{ item.age }}
    </span>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            obj: [
                { name: "张三", age: 20 },
                { name: "李四", age: 21 },
                { name: "王五", age: 22 }
            ]
        }
    })
</script>

在这里插入图片描述
示例：v-for遍历常量

<div id="app">
    <span v-for="i in 5">
        {{ i }}
    </span>
</div>
<script>
    var vm = new Vue({
        el: "#app"
    })
</script>

在这里插入图片描述

6 v-bind：单向绑定绑定元素的属性

v-bind可以绑定元素的属性并执行相应的操作，它可以简写为:。未使用v-bind绑定之前，属性后面的内容是普通字符串，比如<a href="link">去百度</a>，href后的link是一个字符串，达不到跳转的目的；使用v-bind绑定属性之后，href属性之后的link是一个表达式，例如<a v-bind:href="link">去百度</a>，这样就可以进行跳转。

示例：使用v-bind绑定a标签的href属性，使链接生效

<div id="app">
    <!-- 另一种写法：<a :href="link">去百度</a> -->
    <a v-bind:href="link">去百度</a>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            link: "https://www.baidu.com"
        }
    })
</script>

7 v-on：监听元素事件，并执行相应的操作

v-on用来监听元素事件，并执行相应的操作，它可以简写为@，语法如下：

<!-- 不传递参数 -->
<button v-on:click="事件名"></button>
<!-- 需要传递参数 -->
<button v-on:click="事件名($event, 参数1, 参数2...)"></button>
<!-- $event表示事件对象 -->

注意：
（1）事件的回调需要配置在methods对象中，最终会在Vue实例上；
（2）methods中配置的函数，不可以使用箭头函数，否则会改变this的指向；
（3）methods中配置的函数，都是被Vue管理的函数，this指向Vue实例或组件实例对象；
（4）如果需要传递参数，可以使用$event对事件对象event来进行占位；

示例：使用v-on绑定一个事件

<div id="app">
    <button v-on:click="myClick">点击</button>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        methods: {
            myClick: function () {
                console.log("点击了按钮");
            }
        }
    })
</script>

在这里插入图片描述
示例：v-on绑定多个事件

<div id="app">
    <button v-on="{
        click: myClick,
        mouseenter: mouseEnter,
        mouseleave: mouseLeave
    }">点击</button>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        methods: {
            myClick: function () {
                console.log("点击了按钮");
            },
            mouseEnter: function () {
                console.log("鼠标进入按钮");
            },
            mouseLeave: function () {
                console.log("鼠标移出按钮");
            }
        }
    })
</script>

在这里插入图片描述

8 v-model：实现了数据和视图的双向绑定

v-model可以实现数据和视图的双向绑定，它只能应用在表单类元素上（输入类元素），如input、select等。v-model:value可以简写为v-model，因为v-model默认收集的就是value值。

Vue中有两种数据绑定的方式：

  1. 单向绑定v-bind，数据只能从data流向页面。
  2. 双向绑定v-model，数据不仅能从data流向页面，还可以从页面流向data

示例：v-model与input进行绑定，选择性别后在下方显示选择

<div id="app">
    <p>请选择你的性别：</p>
    <input type="radio" value="男" v-model="gender">男
    <input type="radio" value="女" v-model="gender">女
    <p>您选择的性别是：{{ gender }}</p>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            gender: ""
        }
    })
</script>

请添加图片描述
示例：v-model与选择器绑定，在下方显示选择的值

<div id="app">
    <p>请选择你的幸运数字：</p>
    <select v-model="number">
        <option>1</option>
        <option>2</option>
    </select>
    <p>你的选择是：{{ number }}</p>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            number: ""
        }
    })
</script>

请添加图片描述
示例：与textarea绑定，当textarea中的值变化时，也同步显示在页面上

<div id="app">
    <textarea v-model="content"></textarea>
    <p>文本框中内容：{{ content }}</p>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            content: "今天是个好日子" // 设置textarea初始就是有值的
        }
    })
</script>

请添加图片描述

9 v-once：让元素或组件只渲染一次

v-once指令可以让元素或组件只渲染一次，并跳过之后的更新。

示例代码：

<div id="app">
    <h3>v-once</h3>
    <input type="text" v-model="voncetext" />
    <p>{{voncetext}}</p>
    <p v-once>{{voncetext}}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            voncetext: "测试v-once"
        }
    })
</script>

请添加图片描述
两个p标签，input中使用了v-model双向绑定了对象属性voncetext，
（1）在没有使用v-once的时候，输入框的值改变了，p标签的内容也会随之改变
（2）在使用v-once的时候，输入框的值改变了，p标签的内容不会改变

10 v-pre：跳过这个元素和它的子元素的编译过程

v-pre指令用于跳过这个元素和它的子元素的编译过程。对于大量没有指令的节点使用v-pre指令可以加快编译速度。换句话说，我们的代码写了什么样，页面上就显示什么样。

示例：给h1使用v-pre指令，导致插值语法不再编译

<div id="app">
    <h1 v-pre>{{ message }}</h1>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            message: '橘猫吃不胖'
        }
    })
</script>

在这里插入图片描述

11 v-cloak：解决初始化慢而导致页面闪动

插值表达式存在“闪动”的问题：vue.js文件没有加载完成时，在页面上上会出现 “{{message}}”的字样，等到vue创建实例、编译模板时，DOM就会被替换掉，过程中屏幕上会出现闪动一下。v-cloak指令可以解决初始化慢而导致页面闪动的问题，隐藏尚未完成编译的 DOM 模板。

v-cloak会保留在所绑定的元素上，直到相关组件实例被挂载后才移除。配合像[v-cloak] { display: none }这样的CSS规则，它可以在组件编译完毕前隐藏原始模板。具体如下：

<div v-cloak>
	{{ message }}
</div>

[v-cloak] {
  display: none;
}

示例代码：

<div id="app" v-cloak>{{message}}</div>
<style>
    [v-cloak] {
        display: none;
    }
</style>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "this is a book"
        }
    })
</script>
橘猫吃不胖～
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue内置指令大全
CoderBin的博客
10-04 1889
大家好，我是 CoderBin，太久没碰 Vue 了，搞的连一些最基本的指令写法都有点模糊了，所以这一次就对Vue所有的内置指令进行回顾总结，前面先说明一些常用指令，不常用的放在后面。
vue的router-link和a标签的本质区别
weixin_51281654的博客
06-18 1080
router-link会自动渲染成一个<a>标记，以便默认情况下，通过它可以在应用程序的路由之间进行导航。2）在router-link中，通过router-link进行跳转并不会跳转到新的页面，也不会重新渲染，它会选择路由所指的组件进行渲染，避免重复渲染。a标签是HTML中的标签，用于创建链接。1）在a标签中，点击a标签会从当前页面跳转到另一个页面，通过a标签跳转，页面就会重新加载，相当于重新打开了一个网页。总而言之，通过a标签和router-link对比，router-link避免了重复渲染。
vue源码中值得学习的方法
前端开发博客
10-20 323
作者：chinamasters https://segmentfault.com/a/1190000025157159最近在深入研究vue源码，把学习过程中，看到的一些好玩的的函数方...
vue跳转网页的两种方式
热门推荐
qq_43537987的博客
06-26 3万+
网页跳转的两种方式 使用a标签（<router-link>）方式跳转 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-s...
Vue3 – 高级语法补充
weixin_56663198的博客
07-17 754
1 Vue中自定义指令 2 Vue内置组件Teleport 3 Vue内置组件Suspense 4 Vue中安装插件的方式 5 Vue中渲染函数的使用 6 Vue中编写jsx的语法
vue内置指令详解
08-27
Vue 内置指令详解 Vue 内置指令是 Vue 模板中最常用的功能之一，它们带有前缀 v-，主要职责是当其表达式的值改变时，相应的将某些行为应用在 DOM 上。下面将详细介绍 Vue 内置指令的使用方法和应用场景。 一、v-...
vue自定义指令实现方法详解
10-17
自定义指令的使用方式与Vue内置指令类似，将指令ID放在`v-`前缀后面，接着是表达式或动态绑定。例如： ```html 我是自定义指令 ``` 在上面的例子中，`v-color`是一个自定义指令，`red`是绑定的值，可以通过Vue实例...
Vue 通过自定义指令回顾v-内置指令(小结)
12-12
Vue.js 的各种指令（Directives）更加方便我们去数据驱动 DOM，例如 v-bind、v-on、v-model、v-if、v-for、v-once 等内置指令，这些指令的职责就是当表达式改变时将某些行为应用到 DOM 上，尽量不去操作增删改 DOM。...
vue常用指令代码实例总结
12-20
vue常用内置指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>12_指令_内置指令</title> <style> [v-cloak] { display: none } </...
Vue指令指令大全
10-17
本文为大家介绍了VUE中内置指令包括：v-text,v-html,v-show,v-if,v-else,v-else-if,v-for,v-on,v-bind,v-model,v-pre,v-cloak,v-once
Vue 中 a标签上href无法跳转的解决方式
10-16
今天小编大家分享一篇Vue 中 a标签上href无法跳转的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue自定义指令拖拽功能示例
08-31
Vue还支持对键盘事件进行自定义，例如，可以修改内置的`v-on`指令的键码映射。在本例中，我们看到如何自定义`v-on`指令来识别自定义的`myenter`键码： ```javascript Vue.directive('on').keyCodes.ctrl = 17; Vue....
vue自定义指令directive的使用方法
10-17
Vue.js 是一款流行的前端框架，它的核心特性之一是基于数据绑定的指令系统。Vue 内置了许多常用的指令，如 `v-model`、`v-show` 和 `v-...在考虑使用自定义指令之前，先检查是否有现成的内置指令或组件可以满足需求。
Vue自定义指令介绍(2)
09-01
Vue 自定义指令是该框架的一个强大特性，允许我们扩展Vue内置的指令系统，以满足特定的交互需求或实现特定的DOM操作。在本文中，我们将深入探讨Vue自定义指令的概念、语法、钩子函数以及如何创建和使用它们。 首先...
Vue自定义指令写法与个人理解
10-17
在Vue中，预定义了一些内置指令，如v-if、v-else、v-for等，用于条件渲染、循环遍历等常见任务。然而，Vue也允许开发者自定义指令，以满足特定需求。 Vue自定义指令的创建主要是通过`Vue.directive()`函数来完成。...
vue学习笔记（八）——Vue组件-进阶（插槽、自定义指令）
最新发布
weixin_56370772的博客
11-27 152
准备MyTable.vue组件 – 内置表格, 传入数组循环铺设页面, 把对象每个内容显示在单元格里准备UseTable.vue – 准备数据传入给MyTable.vue使用例子：我想要给td内显示图片，需要传入自定义的img标签在MyTable.vue的td中准备占位，但是外面需要把图片地址赋予给src属性，所以在slot上把obj数据绑定。
a标签 vue 动态点击_Vue学习2
weixin_39675679的博客
12-30 383
三、v-show指令指令：尤雨溪自定义的HTML属性，都以v-开头。v-model 双向绑定v-show 决定元素是否显示补充一个知识点，单选按钮可以和字符串双向绑定：<p> <label> <input type="radio" name="nation" value="c" v-model="nation"> 中国人 ...
antd + vue3 a-cascader 标签 实现自定义动态获取【地区】级联数据
weixin_54531594的博客
03-02 1062
antd + vue3 标签 实现自定义动态获取【地区】级联数据
vue2中的element-ui的Table表格中formatter的使用
M2857205814的博客
01-28 817
在项目中我们通常使用表格来展示一些数据，但是面对一些复杂的数据，我们需要转换一下内容来实现。 代码中的集群流转顺序，后端返回的是一个字符串内容的数据，我们需要把这个数据转换为数组，使用split的方法，并且用switch的方法，把里边的数字转化为自己需要的内容，大家可以看一下代码，自己试一下，希望我的这个可以帮助大家
什么是 Vue 内置指令？有何作用？有哪些内置指令？
04-28
Vue内置指令是一些特殊的 HTML 特性，用于在模板中添加交互逻辑，让模板和 DOM 变得更加动态化。 Vue内置指令的作用包括： 1. 控制元素的显示和隐藏 2. 动态地设置元素的 CSS 类名 3. 监听表单元素的值的变化 4. 渲染列表、循环渲染等。 Vue内置指令有以下几种： 1. `v-if`：用于根据表达式的值的真假条件地渲染元素。 2. `v-for`：用于循环渲染一组元素。 3. `v-bind`：用于动态地绑定元素的属性。 4. `v-on`：用于绑定事件监听器。 5. `v-model`：用于在表单元素上创建双向绑定。 6. `v-show`：与v-if相似，但不会删除元素，只是通过CSS来控制元素的显示和隐藏。 7. `v-text`：用于替代元素的 `textContent` 属性。 8. `v-html`：用于替换元素的 `innerHTML` 属性。 9. `v-cloak`：用于解决页面闪动的问题。 10. `v-pre`：用于跳过元素和子元素的编译过程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值