vue.js指令总结

Posted 2020-09-08

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js指令总结相关的知识，希望对你有一定的参考价值。

　　用于输出真正html，而不是纯文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-html的使用</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="v-html" v-html="message">
        {{message}}
    </div>
    <script>
        var vHtml=new Vue({
            el:‘#v-html‘,
            data:{
                message:‘<p>v-html指令添加的p标签</p>‘
            }
        })
    </script>
</body>
</html>

2.v-bind

　　用于html属性的数据绑定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind的使用</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <input id="v-bind" type="text" v-bind:disabled="message">
    <script>
        var vBind=new Vue({
            el:‘#v-bind‘,
            data:{
                message:‘false‘
            }
        })
    </script>
</body>
</html>

3.v-on

　　用于监听DOM事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on的使用</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="v-on" v-on:click="changeStatus">
        {{message}}
    </div>
    <script>
        var vOn=new Vue({
            el:‘#v-on‘,
            data:{
                message:‘我喜欢vue.js‘
            },
            methods:{
                changeStatus:function(){
                    if(this.message==‘我喜欢vue.js‘)
                    {
                        this.message=‘我不喜欢vue.js‘
                    }
                    else
                    {
                        this.message="我喜欢vue.js"
                    }
                }
            }
        })
    </script>
</body>
</html>

　　注意：只有v-on和v-bind可以接参数，在指令后面用冒号指明属性和值绑定。

4.v-model

　　用于表单输入与应用状态的双向数据绑定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model的使用</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="v-model">
        <input type="text" v-model="message">
        <p>{{message}}</p>
    </div>
    <script>
        var vModel=new Vue({
            el:‘#v-model‘,
            data:{
                message:‘‘
            }
        })
    </script>
</body>
</html>

5.v-if

　　v-if接收bool类型。true的话则生成html，false则不生成。或者直接将元素remove掉。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if的使用</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="v-if">
        <p v-if="seen">我在闪烁</p>
    </div>
    <script>
        var vIf=new Vue({
            el:‘#v-if‘,
            data:{
                seen:true
            },
            methods:{
                change:function(){
                    if(this.seen)
                    {
                        this.seen=false;
                    }
                    else
                    {
                        this.seen=true;
                    }
                }
            }
        })
        setInterval(vIf.change,1000)
    </script>
</body>
</html>

以上是关于vue.js指令总结的主要内容，如果未能解决你的问题，请参考以下文章

Vue考前详细总结

Vue.js 基础指令实例讲解（各种数据绑定表单渲染大总结）——新手入门高手进阶

Vue月度总结1

VUE常用指令总结！

使用带有渲染功能的 Vue.js 3 片段

Vue.js高效前端开发 • Vue基本指令