Vue常用指令使用与演示

最新推荐文章于 2023-02-24 10:44:32 发布
最新推荐文章于 2023-02-24 10:44:32 发布
阅读量472 收藏 2
点赞数
分类专栏： html vue 文章标签： vue html javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22154647/article/details/106733023
版权
html 同时被 2 个专栏收录
6 篇文章 0 订阅
订阅专栏
vue
1 篇文章 0 订阅
订阅专栏

Vue指令

渲染数据

v-html

更新元素的innerHTML内容,传入的参数可以包含html标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue_test</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-html="msg1"></div>
        <div v-html="msg2"></div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg1:"这是msg1",
                msg2:`<h1>这是msg2</h1>`
            }
        })
    </script>
</body>

</html>

效果图：
在这里插入图片描述

v-text

更新元素的 textContent内容，参数如果包含html标签不会被解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue_test</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-text="msg1"></div>
        <div v-text="msg2"></div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg1:"这是msg1",
                msg2:`<h1>这是msg2</h1>`
            }
        })
    </script>
</body>

</html>

效果图：
在这里插入图片描述

v-show

根据传入参数值的真假（true/false），切换元素的display，让其显示或隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue_test</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-text="msg1" v-show="show"></div>
        
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg1:"这是msg1",
                show:true
            }
        })
    </script>
</body>

</html>

效果图：

false：元素的样式为display:none
在这里插入图片描述
true:元素正常显示
在这里插入图片描述

v-if

根据参数的或者表达式的真/假（true/false），决定是否渲染该元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue_test</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
</head>
<body>
    <div id="app">v
        <div v-text="msg1" v-if="show"></div>
        
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg1:"Vue v-if",
                show:true
            }
        })
    </script>
</body>

</html>

效果图：

参数结果为true时，渲染该元素
在这里插入图片描述
参数结果为false时，不加载渲染该元素
在这里插入图片描述

v-else

不需要传入参数或者表达式，前一个兄弟元素必须有v-if或者v-else-if(使用方法同v-if)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue_test</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-text="msg1" v-if="show"></div>
        <div v-text="msg2" v-else></div>
        
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg1:"msg1",
                msg2:"msg2",
                show:false
            }
        })
    </script>
</body>

</html>

效果图：
在这里插入图片描述

v-for

遍历源数据并多次渲染所在元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue_test</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in users">{{item}}</li>
        </ul>
        
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                users:["user1","user2","user3"]
            }
        })
    </script>
</body>

</html>

效果图：
在这里插入图片描述

v-once

只在页面加载时渲染元素一次，随后即便渲染的源数据改变，该元素也不重新渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue_test</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{num}}</p>
        once:
        <span v-once>{{num}}</span>
        <button @click="Add"> +1</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                num:0
            },
            methods: {
                Add(){
                    this.num++
                }
            },
        })
    </script>
</body>

</html>

效果图：

在这里插入图片描述

v-cloak

数据加载较慢时，插值表达式还未获取到值，会以原始的状态显示，v-cloak指令配合css样式可以令其先隐藏，等到渲染完成后再显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue_test</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
</head>
<style>
    [v-cloak]{
        display: none;
    }
</style>
<body>
    <div id="app">
            <p v-cloak>{{msg}}</p>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg:"v-cloak"
            },
        })
    </script>
</body>

</html>

效果图:

加载中
在这里插入图片描述
加载完成
在这里插入图片描述

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue_test</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
</head>
<body>
    <div id="app">
            <p v-pre>{{msg}}</p>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg:"v-pre"
            }
        })
    </script>
</body>

</html>

效果图：
在这里插入图片描述

属性绑定

v-bind

动态地绑定一个或多个属性，可以简写为 “:”（英文冒号）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue_test</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
</head>
<body>
    <div id="app">
        <img v-bind:src="imageSrc">
        <img :src="imageSrc" alt="">
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                imageSrc:"https://tse4-mm.cn.bing.net/th/id/OIP.wVTMCxNUrobrTPCygDWdDQHaEg?w=284&h=180&c=7&o=5&pid=1.7"
            },
            
        })
    </script>
</body>

</html>

效果图：
在这里插入图片描述

绑定事件

v-on

绑定事件的监听器，可以简写为“ @ ”。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue_test</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
</head>
<body>
    <div id="app">
        <span>{{num}}</span>
        <p>@</p>
        <button @click="add">+1</button>
        <p>v-on</p>
        <button v-on:click="add">+1</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                num:0
            },
            methods: {
                add(){
                    this.num++
                }
            },
        })
    </script>
</body>

</html>

效果图：
在这里插入图片描述

数据绑定

v-model

在表单控件或者组件上创建双向绑定，随表单控件类型不同而不同。

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

<head>
    <meta charset="UTF-8">
    <title>Vue_test</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>
            <input type="text" v-model="msg">
            text:{{msg}}
        </p>
        <p>
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            <label for="jack">Jack</label>
            <input type="checkbox" id="john" value="John" v-model="checkedNames">
            <label for="john">John</label>
            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
            <label for="mike">Mike</label>
            <br>
            <span>Checked names: {{ checkedNames }}</span>
        </p>
        <p>
            <input type="radio" id="one" value="One" v-model="picked">
            <label for="one">One</label>
            <br>
            <input type="radio" id="two" value="Two" v-model="picked">
            <label for="two">Two</label>
            <br>
            <span>Picked: {{ picked }}</span>
        </p>
        <p>
            <select v-model="selects">
                <option value="a">a</option>
                <option value="b">b</option>
                <option value="c">c</option>
            </select>
            pick:{{selects}}
        </p>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "",
                checkedNames: [],
                selects: "",
                picked:""
            },

        })
    </script>
</body>

</html>

效果图：
在这里插入图片描述

fjxylin
关注
专栏目录
Vue.js常用指令的使用小结
10-19
本文主要介绍Vue.js中常用的指令，包括数据渲染、条件渲染以及循环渲染列表的使用方法。 1. 数据渲染： Vue.js通过几种方式来实现数据到DOM的绑定，最常用的是v-text、v-html和Mustache插值（{{}}）。 - v-text：...
Vue-自定义指令
weixin_41040445的博客
12-27 969
Vue.directive 自定义指令的入口 基本使用 app.vue 中设置一个h1标签 <h1 v-color='"red"'>自定义指令red</h1> <h1 v-color='"orange"'>自定义指令orange</h1> <h1 v-size='"60px"'>自定义指令 显示隐藏</h1> v-color、v-size 时自定义指令的名称，red orange 60px 是属性值 在main....
Vue自定义指令（含常用8种指令封装）
qq_22187895的专栏
02-24 841
基本概念一、自定义指令是用来操作dom的，尽管vue推崇数据驱动试图的理念，但并非所又情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅仅可用于定义任何dom操作，并且是可以复用的‘比如谷歌图片的加载做的非常优雅，在图片未完成加载前，用随机的背景色占位背景图片加载晚成后才直接渲染出来。用自定义只能怪可以非常方便的实现这个功能。Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。
vue中常用的v-指令演示
jinlovo
05-07 1823
vue中常用的v-指令演示 v-text:元素的InnerText属性,必须是双标签 跟{{ }}效果是一样的 使用较少 v-html: 元素的innerHTML v-if : 判断是否插入这个元素,相当于对元素的销毁和创建 v-else-if v-else v-show 隐藏元素 如果确定要隐藏, 会给元素的style加上display:none。是基于css样式的切换 v-for ...
Vue中常用指令的具体含义与用法
zhangxiaojiong_zh的博客
05-06 2629
1.vue中的指令是指什么？ 在表现形式上，就是带有’v-'前缀的属性。v-属性名=‘具体表达式’。当表达式对应的值发生变化后，将响应式的作用于Dom，从而影响视图层。更为具体的说，指令结合属性作为暗号，框架会根据按照对应的不同的值来进行Dom操作的绑定。因此，帮我们在实际开发中做了减法。 2.vue中常用的指令 （1）v-text v-text=‘msg1’，msg1被定义在数据属性中，指明了具...
Vue封装常用指令Directive
09-21 626
需求 只能输入数字输入字母和特殊字符自动过滤掉输入完成失焦自动加.00 如果输入了小数自动四舍五入为22.22类似这样格式 let number = { twoWay: true, bind:function (el) { el.addEventListener('blur',function () { // ...
Vue常用的几个指令附完整案例
01-19
越来越多的人在用Vue，刚开始接触vue的话常接触的指令就几个，统一归纳一下，做个demo演示。 指令 v-text v-html v-bind v-on v-model v-for 代码 学习技术最好还是要看下代码是什么样的。 v-text 解释：更新DOM...
在vue中使用G2图表的示例代码
10-17
本文主要通过实例演示了在Vue中使用G2图表进行数据可视化的基础知识和实践操作，展示了如何安装依赖、创建图表容器、绑定事件，并说明了在使用过程中可能会遇到的问题及其解决方案。通过理解这些知识点，开发者可以...
总结常用的Vue.js指令
01-08
总结常用的Vue.js指令 本文承接： 写给后端工程师看的Vue.js入门 指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带...
vue面试编程题vue常见面试题目
最新发布
12-18
在Vue应用中，Vue Router是常用的路由管理库。面试可能会涉及如何设置路由、动态路由匹配、命名视图、导航守卫等概念。理解这些有助于构建复杂的应用结构，并处理页面间的导航逻辑。 4. **computed属性**： ...
Vue自定义指令封装节流函数的方法示例
08-27
本篇文章主要介绍了Vue自定义指令封装节流函数的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue常用的指令
最好的一天
12-04 5702
1.v-text指令：用于更新标签包含的文本，它的作用跟双大括号效果是一样的。 2.v-html指令：绑定一些包含html代码的数据在视图上，例如&lt;strong&gt;Daisy&lt;/strong&gt;,这个字符包含了&lt;strong&gt;标签，要想&lt;strong&gt;不被当做普通的字符串渲染出来，发挥&lt;strong&gt;应有的效果，我们就得使用v-html...
Vue常用的指令及用法
一夜枫林
07-22 1097
v-if ：判断是否隐藏 v-if 可以判断一个属性 的长度 或 是否true 等等 来进行控制隐藏显示 可以结合 v-else 来使用 注意：使用v-else 必须要有v-if 如果不需要频繁切换某节点使⽤v-if（初始渲染开销较⼩，切换开销⽐较⼤）。 <div v-if="list.lenght > 0"> v-if </div> <div v-else> v-else </div> v-for：数据循环 v-for循环普通数组 //
vue的使用方法
weixin_44247303的博客
08-07 5530
vue叫做渐进式框架，有底向上逐层应用，vue的代码执行时组件化和模范化，实施单页面编程，提高浏览器加载速度，减少代码写作采用的是MVVM编写模式。vue可以实现动态加载标签、做动画效果、表单数据双向绑定，异步连接后台等。 **mvvm模式** model—>viewmodel—view 写作方式：![在这里插入图片描述](https://img-blog.csdnimg.cn/20200807133602481.png?x-oss-process=image/watermark,..
Vue指令介绍及使用
AI_huihui的博客
11-06 2532
一、什么是指令 在 vue 中提供了些对页面和数据更方便的输出方式，实质上就是特殊的 html 标签属性，指令中封装了一些DOM行为, 结合属性作为一个行为, 行为有对应的值,根据不同的值，框架会进行相关DOM操作的绑定, 特点: v- 开头。 二、插值表达式 在dom标签中直接插入内容，又叫声明式渲染/文本插值。 语法：{{ 表达式 }} 注意：dom中插值表达式赋值, vue的变量必须在data里声明 三、vue中常用 v-...
Vue几种常用的指令
limeng886549的博客
08-05 6908
1、v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。 2、v-show：根据表达式之真假值，切换元素的 display CSS 属性。 3、v-for：循环指令，基于一个数组或者对象渲染一个列表，vue 2.0以上必须需配合 key值 使用。 4、v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。 5、v-on：用于监听指定元素的...
vue基础的五个常用指令
weixin_60524655的博客
05-21 1223
目录 1. 内容渲染指令 2.属性绑定指令 3.事件绑定指令 4. 双向绑定指令 5.条件渲染指令 1. 内容渲染指令 1. v-text 指令用来获取数据然后以文本的形式渲染到指定标签内部，但是 v-text 也有缺点，就是它会覆盖元素内部原有的内容。所以我们开发中一般用 {{ }} 插值表达式。 2. {{ }}插值表达式，在实际开发中用的的最多，因为它只是内容的占位符，不会覆盖原有的内容。 3. v-html 指令用来...
vue核心基本的使用——vue指令
weixin_57037336的博客
05-09 504
vue的基本使用——vue指令理解vue学习vue的条件vue指令声明式渲染——v-bind条件——v-if列表循环——v-for处理用户动作（事件监听）——v-on事件双向绑定——v-model插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 理解vue vue是一种用于构建用户界面的渐进
element 可移动dialog
昨天1990的专栏
09-10 1951
import Vue from 'vue'; // v-dialogDrag: 弹窗拖拽属性 Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header'); const dragDom = el.querySelector('.el-dialog'); // dialogHeaderEl...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值