Vue常用指令v-bind

动态地绑定一个或多个特性，或一个组件 prop 到表达式。v-bind指令可以在其名称后面带一个参数，中间用一个冒号隔开。

这个参数通常是HTML元素的特性（attribute），比如：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="js/vue.js"></script>
    <style>
        ul {
            list-style: none;
        }

        ul li {
            height: 30px;
            line-height: 30px;
            cursor: pointer;
        }

        .active {
            background-color: orange;
            color: white;
        }
        .red{
            background-color: red;
        }
    </style>
</head>
<body>
<!--
案例实操：让Python背景色为红色,其他为红色.
列表索引与提供的数据一致(index===activeCourse),让对应的课程名字显示黄色,否则显示红色

-->
<div id="app">
　　<!-- :class="index===activeCourse ? \'active\':\'red\' 用到了v-bind-->
    <p v-for="(course,index) in courses" :class="index===activeCourse ? \'active\':\'red\' ">
        {{ course }}
    </p>
</div>

<script>
    // 创建Vue的实例
    let app = new Vue({
        el: \'#app\',
        data: {
            courses: [\'Python\', \'Java\', \'Linux\', \'C#\'],
            activeCourse: 1
        }
    })
</script>
</body>
</html>

v-bind:src="imageSrc" 可以缩写： :src="imgaeSrc"
:class="{ red: isRed }" 或 :class="[classA, classB]" ...
:style="{ fontSize: size + \'px\' }" 或 :style="[styleObjectA, styleObjectB]" ...
绑定一个有属性的对象，比如：v-bind="{ id: someProp, \'other-attr\': otherProp }"

语法结构：v-bind:argument="expression"

因为 Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令，Mustache 是一个 logic-less （轻逻辑）模板解析引擎，它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中。

发表于 2018-11-28 20:32 阿波罗Apollo 阅读(259) 评论(0) 编辑收藏举报