Vue 一些常用的标签

最新推荐文章于 2024-05-14 12:09:23 发布
最新推荐文章于 2024-05-14 12:09:23 发布
阅读量3.6k 收藏 7
点赞数 1
分类专栏： vue笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41359273/article/details/109333271
版权

1.v-once标签，我们知道vue是响应式的，即某个地方数据更改了，界面的数据也会更改，有时候我们只希望界面只渲染一次，不希望界面的数据乱变动，那么就可以使用v-once标签了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    <h2 v-once>{{name}}</h2>
</div>
<script src="./vue.js"></script>
<script>
    const content = new Vue({
        el: '#content',
        data: {
            name: '伽罗'
        }
    })
</script>
</body>
</html>

结果，发现，在控制台修改name属性，修改成功，但页面的数据响应失效
在这里插入图片描述
2.v-html标签，有时候我们请服务器端请求过来的是一些html代码片段，这个时候，v-html标签就可以发挥它的作用了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    <h2 v-html="link"></h2>
</div>
<script src="./vue.js"></script>
<script>
    const content = new Vue({
        el: '#content',
        data: {
            link: '<a href="http://www.baidu.com">百度</a>'
        }
    })
</script>
</body>
</html>

结果
在这里插入图片描述
3.v-text标签，v-text标签的作用其实和{{}}这个称为mustache语法用法是一致的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    <h2 v-text="name"></h2>
    <h2>{{name}}</h2>
</div>
<script src="./vue.js"></script>
<script>
    const content = new Vue({
        el: '#content',
        data: {
            name: '小兰'
        }
    })
</script>
</body>
</html>

结果
在这里插入图片描述
4.v-pre标签，我们知道{{}}是一种mustache语法的书写，Vue底层会解析其包含的数据，但有时候我们不希望Vue帮我们解析，而希望直接显示内容出来，这个时候，可以使用v-pre

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    <h2 v-pre>{{name}}</h2>
    <h2>{{name}}</h2>
</div>
<script src="./vue.js"></script>
<script>
    const content = new Vue({
        el: '#content',
        data: {
            name: '小兰'
        }
    })
</script>
</body>
</html>

结果
在这里插入图片描述
5.v-cloak标签，这个标签的含义为斗篷，我们知道代码是从上面往下面加载的，有时候浏览器会显示出未编译的mustache标签，体验效果不好，应当先隐藏起来，等到程序跑完再显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak] {
        display: none;
        }
    </style>
</head>
<body>
<div id="content">
    <h2 v-cloak>你好，{{message}}</h2>
</div>
<script src="./vue.js"></script>
<script>
    //延迟加载
    setTimeout(() => {
        const content = new Vue({
            el: '#content',
            data: {
                message: '明天'
            }
        })
    },2000)
</script>
</body>
</html>

结果，2秒后结果会一起显示出来，而不会显示mustache语法
在这里插入图片描述
6.v-if,v-else-if.v-else标签
例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    <p v-if="grade>=90">优秀</p>
    <p v-if="grade>=80">良好</p>
    <p v-if="grade>=70">一般</p>
    <p v-if="grade>=60">及格</p>
</div>
<script src="./vue.js"></script>
<script>
        const content = new Vue({
            el: '#content',
            data: {
                grade: 80
            }

        })
</script>
</body>
</html>

结果
在这里插入图片描述
7.v-show，先讲一下v-show和v-if的区别，v-if当条件为false时，不会有元素存在dom中，而v-show条件为fasle时，元素会存在dom中，只是其display设置成了none,隐藏了而已，所以，当需要界面的内容频繁来回切换时，可以选择v-show,界面只需要渲染一次便可使用v-if.
例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    <button @click="btnClick">显示/隐藏内容</button>
    <h2 v-show="isShow">陈数</h2>
</div>
<script src="./vue.js"></script>
<script>
        const content = new Vue({
            el: '#content',
            data: {
                isShow: true
            },
            methods: {
                btnClick() {
                    this.isShow = !this.isShow
                }
            }

        })
</script>
</body>
</html>

结果

在这里插入图片描述
8.v-model,在项目开发中，我们经常碰到用户填写信息，提交表单的操作，v-model主要是用于双向绑定数据，将vue实例里data里的数据，和表单的数据关联绑定起来
1）简单例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    <input type="text" v-model="message"/>
    <h2>{{message}}</h2>
</div>
<script src="./vue.js"></script>
<script>
    const content = new Vue({
        el: '#content',
        data: {
            message: ''
        }
    })
</script>
</body>
</html>

结果
在这里插入图片描述
2）v-model的实现原理，其实就是通过v-bind绑定一个值，以及v-on绑定一个input事件

<input type="text" value="" v-model="message"/>

实际上等同于

<input type="text" value="" v-bind:value="message" v-on:input="message = $event.target.value"/>

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
<!--    <input type="text" v-model="message"/>-->
<!--    <input type="text" v-bind:value="message" v-on:input="message = $event.target.value"/>-->
    <!---语法糖写法-->
    <input type="text" :value="message" @input="change"/>
    <h2>{{message}}</h2>
</div>
<script src="./vue.js"></script>
<script>
    const content = new Vue({
        el: '#content',
        data: {
            message: ''
        },
        methods: {
            change(event) {
                this.message = event.target.value
            }
        }
    })
</script>
</body>
</html>

结果
在这里插入图片描述
3）v-model的修饰符
3.1）lazy,我们在修改输入框内容时，绑定的数据也是瞬间刷新的，而lazy可以让数据在失去焦点时或者回车时再更新
3.2）number,无论我们在输入框输入的是数字还是字母，其后台其实都是将其转换为字符串来进行各种操作的，当我们只希望处理number类型数据时，可以使用number修饰符
3.3）trim,其可以帮我们去掉输入的内容的首尾的空格
例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
<input type="text" value="" v-model.lazy="message"/>
    <h2>{{message}}</h2>
    年龄<input type="text" value="" v-model.number="message">
    <h2>{{message}}</h2>
    <input type="text" value="" v-model.trim="message"/>
    <h2>{{message}}</h2>
</div>
<script src="./vue.js"></script>
<script>
    const content = new Vue({
        el: '#content',
        data: {
            message: ''
        },
        methods: {
            change(event) {
                this.message = event.target.value
            }
        }
    })
</script>
</body>
</html>

结果，没有失去焦点时
在这里插入图片描述
失去焦点时
在这里插入图片描述

#Hideonbush
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue的基本标签
weixin_46484970的博客
12-14 3324
el：挂载点，设置vue实例挂载管理元素，不能使用HTML标签和body标签 data：数据对象 methods：方法 vue实例的作用范围是：vue会管理el选项命中的元素及其内部的后代元素 vue指令： 1、内容绑定，事件绑定。 v-text：设置文本 v-html：设置元素的innerHTML，会解析标签 v-on基础：为元素绑定事件，绑定方法定义再methods属性中，this关键字可以访问定义在data数据中，可以简写成@ 2、显示切换，属性绑定。 v-show：根据表达值的真假，切换元素的显示与
Vue实现多标签选择器
01-21
本文实例为大家分享了Vue实现多标签选择器展示的具体代码，供大家参考，具体内容如下 实现效果 实现代码 <html lang=en> <head> <title>Document</title> <!-- 引入本地组件库 --> <link rel=stylesheet href=static/element-ui/index.css > [removed][removed] [removed][removed] <!-- 引入CDN样式 --
Vue基础知识总结 3：vue常用标签
学Java，找哪吒
07-19 2万+
一、计算属性 1、合并两个字符串 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">{{fullName}}</div> <script src="../js/vue.js">&.
2024年最全vue常用标签，阿里面试p6
最新发布
2401_84435739的博客
05-14 926
button @click=“btnClick(abc, $event)”>按钮。
Vue中常用到的标签和指令
hulin的博客
08-01 1977
Vue中常用到的标签和指令
一、vue学习之常用标签
码
05-13 991
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue常用标签</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app">.
vue中的v-text，v-html，v-on属性
Dreamer
01-31 1123
v-text 设置标签的文本值(textContent)，无论内容是什么，只会解析成为文本。 v-text是将数据设置给标签的文本属性，替换文本属性中原来的值，例如上图，通过程序的运行可以看出，高先生替换掉了第一个h2文本属性中的陕西这个值。在v-text属性中也可以使用字符串的拼接，例如： v-html v-html改变innerHTML值，内容中有html结构时可以被解析为HTML标签，例如： v-on v-on为元素绑定事件，绑定的方法写在methods属性中。v-on:可以简写为@。
使用vue制作滑动标签
10-16
在本文中，我们将深入探讨如何使用Vue.js框架来创建一个滑动标签系统。Vue.js是一个轻量级的前端JavaScript框架，它提供了丰富的数据绑定和组件化功能，使得开发过程更加高效和灵活。以下是一个逐步指南，详细介绍...
vue实现标签云效果的方法详解
10-16
主要介绍了vue实现标签云效果的方法,结合实例形式详细分析了vue标签云的实现技巧与相关操作注意事项,需要的朋友可以参考下
vue自定义time标签
05-28
在Vue.js框架中，自定义`time`标签通常是为了实现更灵活、可定制的时间显示功能。Vue提供了数据绑定和计算属性等机制，使得我们可以轻松处理时间格式化和动态更新。以下将详细介绍如何在Vue中实现“刚刚”、“几分钟...
基于VUE对HTML文档的比对效果
yangyi
12-13 1165
一个适合vue的html代码比对工具。
Vue:使用vue-codemirror编写文本比对功能
LeeBingNing的博客
12-09 6551
使用vue-codemirror搭配diff-match-patch进行文本比对，增加文字描述，示例如下：共4处差异，每处差异的开始行号为：2、589、2904、12328。帮助用户快速定位差异位置
VUE文本比较插件
L_1234_LD的博客
01-07 1627
安装依赖： npm install codemirror npm install diff-match-patch npm install --save codemirror 前台： <div id="view"></div> <script> import CodeMirror from 'codemirror' import 'codemirror/lib/codemirror.css' import 'codemirror/addon...
Vue语法与标签的使用
小威的博客
08-04 3480
作为后端开发的人员来说，需要了解一些前端的知识，最近又复习了一遍Vue的知识，写下了此篇，同时希望能帮助到大家
Vue标签
weixin_44417042的博客
10-17 269
标签v-ifv-forv-bindv-modelkey避免v-if和v-for共用 v-if 判断是否隐藏 v-for 数据循环 v-bind 绑定一个属性 v-model 实现双向绑定 key 当有相同标签名的元素切换时，需要通过 key特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率会替换相同标签内部的内容 避免v-if和v-for共用 当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动容器元素，不会再重复遍历列表中的每个值，而只检查它一次，且不会
vue 实现添加标签删除标签
reg183的专栏
04-03 9135
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>vue学习 语法demo1</title> ...
vue的特点以及常用的标签
shyyyl的博客
07-16 769
特点 1.vue是一个渐进式框架，什么是渐进式呢？ 渐进式意味着你可以将vue作为你应用的一部分嵌入其中，带来更丰富的交互体验 或者如果你希望将更多的业务逻辑使用vue实现，那么vue的核心以及其生态系统 比如core+vue+vuex，也可以满足你各种各样的需求 2.vue的特点和一些常见web高级功能 解耦视图和数据 可复用的组件 前端路由技术 状态管理 虚拟dom vue中常用标签 v-for data(){ return { arr:['美人鱼','少林足球','唐伯虎点秋香'] } } &
vue中的template标签
热门推荐
u013594477的专栏
06-22 13万+
1.template标签，HTML5提供的新标签，更加规范和语义化 ；可以把列表项放入template标签中，然后进行批量渲染 &amp;lt;template id=&quot;tem&quot;&amp;gt; &amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;h1 id=&quot;title&quot;&
vue-cli入门（三）——人员管理实例
大灰狼的小绵羊哥哥的博客
04-23 1万+
前言 在开始开发实例前，应首先了解一下vue-cli的项目结构。接着我们一起来实现一个小demo——人员管理，功能简单，通过这个实例让大家熟悉使用vue-cli开发项目的一些操作，加深对vue-cli项目结构的印象。http://www.jianshu.com/p/5d9b341d650f 实例功能简述 人员管理项目，有两个页面，首页和管理页，管理页主要实现一个简单的增删改功能，
用vue常用标签创建一个表格
04-27
可以使用 Vue 的内置指令 `v-for` 和 `v-bind` 来创建表格，以下是一个简单的示例： ```html <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr v-for="(person, index) in people" :key="index"> <td>{{ person.id }}</td> <td>{{ person.name }}</td> <td>{{ person.age }}</td> </tr> </tbody> </table> ``` 在 Vue 实例中，我们需要定义一个 `people` 数组，该数组包含了我们要显示的数据。例如： ```javascript new Vue({ el: "#app", data: { people: [ { id: 1, name: "Alice", age: 25 }, { id: 2, name: "Bob", age: 30 }, { id: 3, name: "Charlie", age: 35 } ] } }); ``` 这样就可以通过 `v-for` 指令来循环遍历 `people` 数组，并使用 `v-bind` 指令将每个人的属性绑定到表格中的单元格中。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值