Vue 一些常用的标签

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>


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

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值