Vue-指令（v-bind,v-if,v-else,v-else-if,v-for,v-on）

最新推荐文章于 2023-12-06 20:00:23 发布

好运haoyun

最新推荐文章于 2023-12-06 20:00:23 发布

阅读量264

点赞数

分类专栏： Vue 文章标签： vue js javascript java vue.js

本文链接：https://blog.csdn.net/qq_43439968/article/details/108425634

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue框架中的核心指令，包括v-bind用于参数绑定，v-if、v-else和v-else-if实现条件渲染，v-for进行数据循环，以及v-on用于事件监听。每个指令都配以Demo示例，帮助理解其用法。

摘要由CSDN通过智能技术生成

指令

指令带有v-前缀，表示它们是Vue提供的特殊特性，渲染Dom上的一些特殊行为

v-bind

绑定一个参数，可以使用 {{}} 或者v-bind的形式

Demo

<body>
<!--view层，模板-->
<div id="vue-app">
    <span v-bind:title="name">鼠标悬停几秒显示title属性值</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 实例化vue对象
    var vm=new Vue({
        el:"#vue-app",
        /*Model：数据*/
        data:{
            name:"hello vue!"
        }
    });
</script>
</body>

v-if 、v-else、v-else-if

Demo

<!--view层，模板-->
<div id="vue-app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 实例化vue对象
    var vm=new Vue({
        el:"#vue-app",
        data:{
            ok: true
        }
    });
</script>

<body>
<!--view层，模板-->
<div id="vue-app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else-if="type==='C'">C</h1>
    <h1 v-else>D</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 实例化vue对象
    var vm=new Vue({
        el:"#vue-app",
        data:{
            type: "A"
        }
    });
</script>
</body>

v-for

Demo

<div id="vue-app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#vue-app",
        data:{
            items:[
                {message:"test0"},
                {message:"test1"}
            ]
        }
    });
</script>

v-on

绑定事件，对Dom的监听，什么事件使用什么方法

Demo

<body>
<div id="vue-app">
    <button v-on:click="sayHi">click Me</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#vue-app",
        data:{
            message:"haoyunTest"
        },
        methods:{
            sayHi:function () {
                alert(this.message);
            }
        }
    });
</script>
</body>