Vue 一些常用的标签

1.v-once标签，我们知道vue是响应式的，即某个地方数据更改了，界面的数据也会更改，有时候我们只希望界面只渲染一次，不希望界面的数据乱变动，那么就可以使用v-once标签了<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title

#Hideonbush

3856人浏览 · 2020-10-28 15:38:30

#Hideonbush · 2020-10-28 15:38:30 发布

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>

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^