vue常用指令

最新推荐文章于 2023-12-09 18:07:06 发布

qq_43373622

最新推荐文章于 2023-12-09 18:07:06 发布

阅读量122

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_43373622/article/details/113768334

版权

插值操作的指令

v-text

v-text插入数据和Mustache（双括号插值）的不同在于Mustache可以对插入的数据进行运算，即可以插入一个表达式，
而v-text插入的数据不能则进行修改，并且它会覆盖标签内存的内容

 <div id="app">
        <h3>{{number*8}}hello</h3>
        <!-- 而双括号插值则不会影响标签里面的内容,可以正常显示 -->
        <h3 v-text="number">333333333</h3>
         <!-- 标签内部的3333会被覆盖，不会显示 -->
    </div>
    <script>
        const vue = new Vue({
            el: '#app',
            data: {
                number: 8,
            }
        })
    </script>

v-cloak

当有的时候由于网络不好，js代码还没有运行完成，用户首先看到的会是{{text}}，则我们可以使用v-cloak这个指令，可以将这个指令作为一个属性来加入div中
在vue解析之前，div中有一个属性v-cloak
当vue对这个属性进行解析，则会将其删除掉，div中则会没有这个属性
则当有这个属性的时候，让div中的内容隐藏，既可以解决这个屏幕闪动这个问题

模拟屏幕闪动如下

   <style>
        [v-cloak] {
            display: none;
        }
    </style>
<div id="app" v-cloak>
        <h3>{{text}}</h3>
    </div>
    <script>
        setTimeout(function () {
            const vue = new Vue({
                el: '#app',
                data: {
                    text: "hello",
                }
            })
        }, 2000)

    </script>

v-once

当我们不希望view中的内容做到响应式的话，则可以使用这个指令，
该指令表示元素和组件只渲染一次，不会随着数据的改变而改变
该指令后面不需要在有任何表达式，直接使用即可

   <div id="app">
        <h3 v-once>{{text}}</h3>
        <h3>{{text}}</h3>
        <h3>{{text}}</h3>
        <h3>{{text}}</h3>
        <button @click="add">点我修改内容</button>
    </div>
    <script>

        const vue = new Vue({
            el: '#app',
            data: {
                text: "hello",
            },
            methods: {
                add: function () {
                    this.text = "hello laowang";
                }
            }
        })
    </script>

在这里插入图片描述

v-html

某些情况下，我们从服务器请求到的数据本身就是一个html代码，如果我们直接使用{{}}来输出，则会将html当作字符串直接显示在页面
如果我们希望解析成html代码，则可以通过v-html指令，会将数据解析成html代码进行渲染

  <div id="app">
        <button v-html="url"></button>
    </div>
    <script>

        const vue = new Vue({
            el: '#app',
            data: {
                text: "hello",
                url: "<a href='http://www.baidu.com'>百度</a>"
            },

        })
    </script>

在这里插入图片描述

v-pre

显示原本的Mustache语法

 <div id="app">
        <h1>{{text}}</h1>
        <h1 v-pre>{{text}}</h1>
    </div>
    <script>

        const vue = new Vue({
            el: '#app',
            data: {
                text: "hello",
            },

        })
    </script>

动态绑定属性

v-bind

绑定html元素的属性
简写形式：

 <div id="app">
        <img :src="text" alt="">
        <a :href="url">百度一下</a>
        <h1 :class="change()">hello laowang</h1>
        <button @click="fun">点击改变颜色</button>
    </div>
    <script>
        const vue = new Vue({
            el: '#app',
            data: {
                text: "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg",
                url: "http://www.baidu.com",
                isActive: true,
                isActive2: true
            },
            methods: {
                fun: function () {
                    this.isActive = !this.isActive;
                },
                change: function () {
                    return { active: this.isActive, active2: this.isActive2 }
                }
            }

        })
    </script>

 <div id="app">
        <h1 :style="fun()">hello laowang</h1>
    </div>
    <script>
        const vue = new Vue({
            el: '#app',
            data: {
                fontSize: '50',
                color: "orange"
            },
            methods: {
                fun: function () {
                    return { fontSize: this.fontSize + 'px', color: this.color }
                }

            }

        })
    </script>

v-on

在事件定义时，写函数时省略了小括号，但是方法本身是需要一个参数的，
这个时候，vue会默认将浏览器生产的event事件对象作为参数传入到方法
方法定义时，我们需要event对象，同时又需要其他参数
在调用的时候，如何手动的获取到浏览器参数的event对象 $event

 <div id="app">
        <h3 @click="funa(123,$event)">hello 老王</h3>
    </div>
    <script>
        const vue = new Vue({
            methods: {
                funa(a, abc) {
                    console.log(a, abc)
                }

            }

        })
    </script>

v-on修饰符的使用

   <div id="app">
        <!-- stop修饰符的使用 -->
        <div @click="fun">aaaa
            <h3 @click.stop="funb">hello 老王</h3>
        </div>
        <h3>阻止默认事件</h3>
        <!-- prevent修饰符的使用 -->
        <div>
            <form action="http://www.baidu.com">
                <input type="text">
                <input type="text">
                <input type="submit" @click.prevent="func">
            </form>
        </div>
        <!-- 监听键盘按下 -->
        <div>
            <input type="text" @keyup.enter="fund">
        </div>
        <!-- 只监听一次 -->
        <button @click.once="fune">点我只触发一次</button>

    </div>
    <script>
        const vue = new Vue({
            el: "#app",
            methods: {
                fun() {
                    console.log("aaaaaaa");
                },
                funb() {
                    console.log("hello laowang");//产生事件冒泡，解决办法使用修饰符stop
                },
                func() {
                    console.log(9999);//此时我们已经自定义事件则需要阻止默认事件，使用prevent
                },
                fund() {
                    console.log("enter被按下了");//监听按下enter
                },
                fune() {
                    console.log("被按下了");//只触发一次使用once
                }
            }
        })
    </script>

v-if

当多个条件判断的时候，用计算属性会更好一些

<div id="app">
        <div>
            <h2 v-if="score>=90">优秀</h2>
            <h2 v-else-if="score>=60">及格</h2>
            <h2 v-else>不及格</h2>
        </div>
        <h1>{{showScore}}</h1>
    </div>
    <script>
        const vue = new Vue({
            el: "#app",
            data: {
                score: 88
            },
            computed: {
                showScore() {
                    let scoreValue = "";
                    if (this.score >= 90) {
                        scoreValue = "优秀";
                    } else if (this.score >= 80) {
                        scoreValue = "良好";
                    } else if (this.score >= 60) {
                        scoreValue = "及格";
                    } else {
                        scoreValue = "不及格";
                    }
                    return scoreValue
                }

            }
        })
    </script>

 <div id="app">
        <span v-if="bool">
            <label for="username">用户账号</label>
            <input type="text" placeholder="用户账号" id="username" key="username">
<!-- key作为一个标识，vue底层虚拟dom的原因，会进行复用，如果不想进行复用，则设置不同的key值 -->
        </span>
        <span v-else>
            <label for="useremail">用户邮箱</label>
            <input type="text" placeholder="用户邮箱" id="useremail" key="useremail">
        </span>
        <button @click="bool=!bool">切换类型</button>
    </div>
    <script>
        const vue = new Vue({
            el: "#app",
            data: {
                bool: true
            }
        })
    </script>

v-show

v-show与v-if的区别，v-if是对dom元素的删除和添加，而v-show是将dom元素使用css的方式进行显示和隐藏（display）

如果需要在显示和隐藏之间切换很频繁时，使用v-show
当只有一次切换的时候，通过使用v-if

v-for

v-for遍历对象

v-for循环中绑定的key值来提高性能，复用性，其中绑定的key要与展示的数据进行一一对应，否则没有意义

 <div id="app">
        <ul>
            <li v-for="item in obj">{{item}}</li>
            <!-- item为value值 -->
            <li v-for="(item,key,index) in obj">{{item}} {{key}} {{index}}</li>
        </ul>
    </div>
    <script>
        const vue = new Vue({
            el: "#app",
            data: {
                obj: {
                    name: "小王",
                    age: 18,
                    gender: "男"
                }

            }
        })
    </script>

v-for指令遍历数组

div id="app">
        <ul>
            <li v-for="(value,index) in arr">{{value}},{{index}}</li>

        </ul>
    </div>
    <script>
        const vue = new Vue({
            el: "#app",
            data: {
                arr: [
                    111, 222, 333, 444
                ]

            }
        })
    </script>

qq_43373622

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
vue常用指令

插值操作的指令v-textv-text插入数据和Mustache（双括号插值）的不同在于Mustache可以对插入的数据进行运算，即可以插入一个表达式，而v-text插入的数据不能则进行修改，并且它会覆盖标签内存的内容 <div id="app"> <h3>{{number*8}}hello</h3>  <h3 v-text="
复制链接

扫一扫