Vue 2.0 入门系列（3）属性绑定

本节要实现的功能如下：

点击按钮，改变颜色。

js 实现

首先看看如何用 js 来实现：

// css
<style>
    .button {
        color:white; 
    }
</style>

// html
<button id="button" class ="button" title="power by js" onclick="changeColor()">点我改变颜色</button>

// js
<script>
    var changeColor = function() {
        document.getElementById('button').style.color = "red";
    }
</script>

为了方便起见，这次我们直接使用 onclick 属性来绑定事件。点击之后，触发 changeColor 函数，然后查找对应元素并改变样式。

vue 实现

现在，来看看 vue 如何实现:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script>
    <style>
        .isClick {
            background:red;
        }
        .isNotClick {
            background:white;
        }
    </style>
</head>
<body>
    <div id="root">
        <button :class="className" :title="title" @click="changeColor()" v-text="text"></button>
    </div>
    <script>

        let data = {
            text:"点我改变颜色",
            title: "power by vue",
            className: "isNotClick"  // 初始类
        };

        var vm = new Vue({
            el: "#root",
            data:data,
            methods: {
                changeColor() {
                    vm.className = "isClick"; // 改变类
                }
            }
        });
    </script>
</body>
</html>

vue 没办法使用插值和 v-text 绑定属性，因此下面的写法是错误的：

<button title="{{title}}" v-text="text"></button>

let data = {
    title: "power by vue",
    text: "点我改变颜色"
};

绑定属性，需要使用 v-bind 指令：

<button v-bind:title="title" v-text="text"></button>

v-bind 指令可以简写为 :

<button :title="title">点我改变颜色</button>

不单单是 title，其他属性也可以使用 v-bind 指令，包括类：

<button :class="className" :title="title" @click="changeColor()" v-text="text"></button>

这样的话，class 的名字就与 className 绑定在一起了，就可以根据需要随时更改类名了。实际上，也可以给属性传入对象，这样就变成了条件判断:

:class = "{'afterClick':isClick}"

若 isClick 的值为 true，则添加类 afterClick，我们来看看完整的演示：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script>
    <style>
        .afterClick {
            background:red;
        }
        .isNotClick {
            background:white;
        }
    </style>
</head>
<body>
    <div id="root">
        <button :class="[{'afterClick':isClick},{'isNotClick':!isClick}]" :title="title" @click="changeColor()" v-text="text"></button>
    </div>
    <script>

        let data = {
            title: "power by vue",
            text: "点我改变颜色",
            isClick:false
        };

        var vm = new Vue({
            el: "#root",
            data:data,
            methods: {
                changeColor() {
                    vm.isClick = true;
                }
            }
        });
    </script>
</body>
</html>

参考：

Vue 2.0 入门系列（3）属性绑定

js 实现

vue 实现

心智极客

引用和评论

小程序入门案例教学 - 手机归属地查询

开发插件集合

Vue.js-方法与事件

Vue使用mixins

这个前端神器，竟让滴滴、美团都爱不释手？！

使用基于 WebRTC 的 JavaScript API 在浏览器环境里调用本机摄像头

推荐一个国产的 vue 中最好用的高性能表格 vxe-table grid 在线编辑表格，流畅渲染上万条数据