todos.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloVue Todo Tutorial</title>
    <style>
        .empty {
            border-color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="text"
           v-bind:class='{empty: !count}'
           v-model="value">
    <input type="button" value="发送" v-on:click="send"/>
    <div>value 的值是：{{ value }}</div>
    <!-- 引用 count -->
    <div>字数：{{ count }}</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: function () {
            return {value: ''}
        },
        methods: {
            send: function () {
                alert('发送成功！');
                this.value = ''
            }
        },
        computed: {
            count: function () {
                return this.value.length
            }
        }
    })
</script>
</html>