Vue指令实战：v-bind, v-if, v-for的应用详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Massimo__JAVA/article/details/125421334

一、v-bind

案例：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 导入vue.js-->
    <script src="../js/Vue.js"></script>
</head>
<body>

<!--view层-->
<div id="app">
    <span v-bind:title="message">
        鼠标悬停在这里查看此处动态绑定的提示信息
    </span>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        //Model：数据
        data:{
            message:"hello vue!"
        }
    });
</script>

</body>
</html>

v-bind等被称为指令。指令带有前缀V-，以表示它们是Vue提供的特殊特性。

它们会在渲染的DOM上应用特殊的响应式行为。在这里，该指令的意思是:“将这个元素节点的title 特性和Vue实例的message属性保持一致”。

如果再次打开浏览器的JavaScript 控制台，输入app.message =‘新消息’，就会再一次看到这个绑定了title 特性的HTML已经进行了更新。

二、v-if、v-else

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/Vue.js"></script>
</head>
<body>

<div id="app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">A</h1>
    <h1 v-else>C</h1>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            ok: true ,
            type: 'A'
        }
    });
</script>

</body>
</html>

效果：
在这里插入图片描述

三、v-for

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/Vue.js"></script>
</head>
<body>

<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
    ===============================
    <li v-for="(item , index) in items">
        {{index}}
    </li>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data: {
            items : [
                {message : 'Java'},
                {message : '前端'},
                {message : 'Vue'}
            ]
        }
    });
</script>

</body>
</html>