vue常用指令

已于 2023-06-04 14:24:02 修改
阅读量1k 收藏 1
点赞数 1
文章标签： vue.js javascript 前端
于 2023-05-28 18:04:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42108331/article/details/130914721
版权

vue是前端框架，使用vue指令时需要导入vue.js文件；vue的常用指令有以下这些：
在这里插入图片描述

v-bind、v-model：双向绑定数据、链接

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue常用指令</title>

    <!-- 导入vue.js文件 -->
    <script src="js/vue.js"></script>

</head>

<body>
    <div id="app">
        <!-- 创建双向数据绑定，该输入框中的值和Vue中url属性值绑定，一变都变 -->
        <input type="text" v-model="url" />

        <!-- 将Vue中的url值输出 -->
        {{url}}

        <!-- 为该标签绑定属性值 -->
        <a v-bind:href="url">跳转</a>

        <!-- v-bind可省略，但冒号(:)不可省略 -->
        <a :href="url">跳转</a>
    </div>

    <script>
        new Vue({
            // vue接管的代码范围，#app表示vue接管的代码范围为id为app的盒子以内
            el: "#app",
            data:
            {
                url: ""
            }
        })
    </script>

</body>

</html>

在这里插入图片描述

v-on：绑定js事件

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue常用指令</title>

    <!-- 导入vue.js文件 -->
    <script src="js/vue.js"></script>

</head>

<body>
    <div id="app">
        <!-- 给输入框绑定事件 -->
        <input type="button" value="按钮1" v-on:click="method1()" />
        <input type="button" value="按钮2" v-on:click="method2()" />
    </div>

    <script>
        new Vue({
            // vue接管的代码范围，#app表示vue接管的代码范围为id为app的盒子以内
            el: "#app",
            data: {},
            methods: {
                // method1的内容
                method1: function () {
                    document.write("vue绑定的事件1执行了")
                },
                // method2的内容
                method2: function () {
                    document.write("vue绑定的事件2执行了")
                }
            }
        })
    </script>

</body>

</html>

在这里插入图片描述

v-if、v-else、v-else-if：展示符合条件的元素

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue常用指令</title>

    <!-- 导入vue.js文件 -->
    <script src="js/vue.js"></script>

</head>

<body>
    <div id="app">
        <!-- 给输入框绑定事件 -->
        您的年龄：<input type="text" v-model="age" />

        <!-- "="后面的内容是vue的语句内容，需要用一对引号括起来，如果语句里面还用到引号，可使用单引号('') -->
        <span v-if="age==''">请输入年龄</span>

        <span v-else-if="age <= 35">您是年轻人</span>

        <span v-else-if="age > 35 && age <= 60">您是中年人（35-60）</span>

        <span v-else>您是老年人</span>
    </div>

    <script>
        new Vue({
            // vue接管的代码范围，#app表示vue接管的代码范围为id为app的盒子以内
            el: "#app",
            data: {
                age: ""
            }
        })
    </script>

</body>

</html>

在这里插入图片描述

v-show：展示符合条件的元素

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue常用指令</title>

    <!-- 导入vue.js文件 -->
    <script src="js/vue.js"></script>

</head>

<body>
    <div id="app">
        <!-- 给输入框绑定事件 -->
        您的年龄：<input type="text" v-model="age" />

        <!-- 使用v-show方式展示符合条件的元素 -->
        <span v-show="age <= 35">您是年轻人</span>

        <span v-show="age > 35 && age <= 60">您是中年人（35-60）</span>

        <span v-show>您是老年人</span>
    </div>

    <script>
        new Vue({
            // vue接管的代码范围，#app表示vue接管的代码范围为id为app的盒子以内
            el: "#app",
            data: {
                age: ""
            }
        })
    </script>

</body>

</html>

需要区别于v-if、v-else-if方式
在这里插入图片描述
在这里插入图片描述

查看css语法中，关于display属性的使用
在这里插入图片描述

v-for：通过循环，展示vue中绑定的所有数据

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue常用指令</title>

    <!-- 导入vue.js文件 -->
    <script src="js/vue.js"></script>

</head>

<body>
    <div id="app">
        <!-- 循环展示vue中city的所有数据 -->
        <div v-for="c in city">{{c}}</div>
    </div>

    <script>
        new Vue({
            // vue接管的代码范围，#app表示vue接管的代码范围为id为app的盒子以内
            el: "#app",
            data: {
                city: ["北京", "上海", "杭州", "成都", "广州"]
            }
        })
    </script>

</body>

</html>

在这里插入图片描述

如果想要索引值，可更改循环如下：第一个是元素，第二个是索引

    <div id="app">
        <!-- c是元素，i是元素所在的索引 -->
        <div v-for="c,i in city">{{i}}：{{c}}</div>
    </div>

在这里插入图片描述

总结

需要区别于v-if、v-else-if、v-else和v-show两种展示符合条件元素的方式，

（1）v-if、v-else-if、v-else是只显示符合条件的元素，其他元素不显示；v-show是通过display:none的方式隐藏不符合条件的元素；

（2）v-if可用于单纯的判断，v-show不行，如上面的年龄段判断，v-if可以判断age为空的情况，v-show不行。

在这里插入图片描述
在这里插入图片描述

何中应
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue常用指令代码实例总结
12-20
vue常用内置指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>12_指令_内置指令</title> <style> [v-cloak] { display: none } </...
Vue常用指令详解分析
10-18
给大家详细分析了关于VUE的常用的相关指令内容，对此有需要的朋友们可以学习下。
vue 的指令
热门推荐
青蛙king的博客
10-27 1万+
一、vue 的指令 指令的本质：语法糖，标志位。在编译阶段 render 函数里，会把指令编译成 JavaScript 代码。 vue的14个指令： v-text v-html（不建议使用） v-show v-if v-else-if v-else v-for v-on v-bind v-model v-slot v-pre（使用频率很低） v-once（使用频率很低） v-cloak（使用频率极低，不细介绍） 1、v-text v-text 指令，会把该元素下面的所有内.
vue指令
fake_8的博客
12-09 2531
vue指令
Vue常用指令3(双向绑定指令/列表渲染指令)(v-modle/v-for)
最新发布
cyqwersj的博客
04-21 213
双向绑定：1. 数据改变后，呈现的页面结果会更新2. 页面结果更新后，数据也会随之而变作用：给表单元素(input、radio、select）使用，双向绑定数据，可以快速 获取或设置表单元素内容语法：v-model="变量"需求：使用双向绑定实现以下需求1. 点击登录按钮获取表单中的内容2. 点击重置按钮清空表单中的内容我们先把v-model段代码删掉，可以看到无论提交什么代码都不会在console显示出来现在我们像上面代码运行，然后输入账号密码已经成功显示出来了。
vue指令大全
qq_43235503的博客
04-13 1556
vue指令大全
Vue常用指令+用法举例 详解
m0_69287579的博客
08-18 3007
有：v-on指令、v-model指令、v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-text指令、v-html指令、v-bind指令等等。vue中双向绑定是一个指令v-model，可以绑定一个动态值到视图，同时视图中变化能改变该值。可以单独使用，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。v-if和v-show有同样的效果，不同在于。v-for可用来遍历数组、对象、字符串。
Vue中的常用指令
weixin_55772633的博客
02-01 836
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
Vue常用的几个指令附完整案例
10-17
越来越多的人在用Vue，刚开始接触vue的话常接触的指令就几个，统一归纳一下。感兴趣的朋友跟随小编一起看看吧
2019vue常用指令.rar
07-17
vue常用指令解析汇总，让你更清晰的了解指令，学习vue
Vue常用指令V-model用法
12-09
v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上，所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会...
Vue学习之常用指令实例详解
10-15
主要介绍了Vue学习之常用指令,结合实例形式详细分析了vue.js创建实例、常用指令及相关操作技巧,需要的朋友可以参考下
VUE常用方法整理.pdf
03-28
第三节 熟悉及使用常用指令 5 1. 什么是指令 5 2. 常用的指令有哪些，及怎么使用这些指令 6 第四节 阐述vue单双向数据流及事件绑定 6 1. vue单向数据流绑定属性值 v-bind: (属性) 简写 :(属性) 6 2. vue双向数据流 v...
详解Vue中的基本语法和常用指令
10-16
Vue.js 是一套构建用户界面的框架，**只关注视图层**，它不仅易于上手，还便于与第三方库或既有项目整合。这篇文章主要介绍了vue 的基本语法和常用指令,需要的朋友可以参考下
Vue中常用的指令 学习 源代码
09-05
本资源为Vue基础框架及指令学习的源...可配合vue常用指令及用法总结进行相应练习： 学习网址https://blog.csdn.net/weixin_46474921/article/details/126673338 指令内容及源代码都是一致同步的，便于大家学习vue技术！
vue内置指令详解
08-27
指令是Vue模板中最常用的一项功能，它带有前缀v-，主要职责是当其表达式的值改变时，相应的将某些行为应用在 DOM 上。这篇文章主要介绍了vue内置指令详解,需要的朋友可以参考下
vue常用的命令
王春燕的博客
06-15 5772
Vue一些常用命令： 1.安装vue-cli npm install --global vue-cli 2.创建一个基于 webpack 模板的新项目 vue init webpack 项目名称 3. 安装依赖： cd 项目名称 npm install 3运行： npm run dev 4.安装vue-resource插件（通过XMLHttpRequest或JSONP发起请求并处理响应 //get post请求）： npm install vue-resource --save......
vue的指令
hlonelier的博客
06-07 194
指令（Directives）是vue为开发者提供的，用于。按照不同的用途可以分为以下6大类内容渲染指令属性绑定指令事件绑定指令双向绑定指令条件渲染指令列表渲染指令。
vue常用指令修饰符
08-29
Vue常用的指令修饰符有以下几种： 1. `.prevent`：阻止默认事件的触发。例如，`@click.prevent`会阻止点击事件的默认行为。 2. `.stop`：停止事件冒泡。它会阻止事件进一步传播到父元素。例如，`@click.stop`会...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

何中应

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值