总结vue中的常用指令

Xwzzz_

已于 2022-04-11 11:10:19 修改

阅读量1.2k

点赞数 8

分类专栏：开发文章标签： vue.js javascript 前端框架

于 2022-04-10 23:23:11 首次发布

本文链接：https://blog.csdn.net/qq_44858608/article/details/124088040

版权

开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.v-model

指令用于表单输入，实现表单控件和数据的双向绑定。一般在 <input>、<select>、<textarea>、组件中使用。

<body>
    <div id="app">
        <div>val的值:{{val}}</div>
        <input v-model="val">
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            val:'123'
        }
    })
</script>

2.v-on：

简写为@，基础事件绑定，用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <button v-on:click="sayHi()">Click</button>
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                methods: {
                    sayHi: function(){
                        alert('123')
                    }
                }
            });
        </script>
    </body>
</html>

3..v-bind

是用于给标签内的属性赋值，指令被用来响应地更新 HTML 属性,动态绑定一些元素的属性,简写为"："

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <a v-bind:href="url">点击跳转</a>
            <img  v-bind:src="imgSrc"/>
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    url: 'http://www.baidu.com',
                    imgSrc: 'https://cn.vuejs.org/'
                }
            });
        </script>
    </body>
</html>

4.v-if指令：取值为true/false，控制元素是否需要被渲染。

v-else指令：和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来。

v-show指令：指令的取值为true/false，分别对应着显示/隐藏。

v-if和v-show有同样的效果，不同在v-if是重新渲染DOM，v-show使用display属性来控制显示隐藏。v-if有更高的切换消耗,v-show有渲染消耗但它只是基于css的切换

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <p v-show="flag">123</p>
        <button v-on:click="hide">显示和隐藏</button>
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    flag: true
                },
                methods:{
                    hide: function(){
                        this.flag=!this.flag;
                    }
                }
            });
        </script>
    </body>
</html>

<div id="app">
   	<div>
       成绩为：<span v-if="score >= 90">优秀</span>
       <span v-else-if="score >= 80">良好</span>
       <span v-else-if="score >= 60">及格</span>
       <span v-else>不及格</span>
    </div>
</div>
<script>
     new Vue({
        el:"#app",
        data:{
            msg:'message',
            score:59,  
        },
    })
</script>

5.v-for指令：遍历vue实例中data属性的值，实现列表的渲染。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
        <ul >
            <li v-for="student in students">{{student.name}}的年龄是：{{student.age}}岁</li>
        </ul>
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    students: [
                        {name:'xiaoming',age: 18},
                        {name: 'xiaohong',age: 19},
                        {name: 'xiaolan',age: 10}
                    ]
                }
            });
        </script>
    </body>
</html>

6.v-once：通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新

<body>
    <div id="app">
        <p v-once>输入框的值：{{ msg }}</p>
        <p>输入框的值：{{ msg }}</p>
        <input type="text" v-model="msg">
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: "123"
            },
            methods: {
            }
        })
    </script>
</body>
</html>

此处v-once绑定的p标签的msg值不会改变

7.v-text是用于操做纯文本，它会替代显示对应的数据对象上的值。

v-html用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

<body>
    <div id="app">
        {{friend}}
        <div v-text="friend"></div>
        <div v-html="friend"></div>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                friend:"<h1>hi</h1>"
            }
        })
    </script>
</body>

此时v-text会把标签转义输出。即原模原样输出，h1标签没效果，但是v-html会直接输出结果。即h1标签会出效果

在这里插入图片描述

Xwzzz_

关注

8
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
总结vue中的常用指令

1.v-model指令用于表单输入，实现表单控件和数据的双向绑定。一般在 <input>、<select>、<textarea>、组件中使用。<body> <div id="app"> <div>val的值:{{val}}</div> <input v-model="val"> </div></body><script&g
复制链接

扫一扫