修改代码,使得input框输入内容后,div部分value的值同步显示 、input框输入后,div部分value对应字数同步显示输入内容的字数 、当input框没有内容时,div部分value对应的值不显示,同时input框边框为红色

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><title>作业一</title>
</head&s j / f D gt;
<body>
<div id="app">
<input type="text" v-mod/ 8 %el="value">
<input type="button" value="发送">
<div>value对应的值: </divM 8 n o>
<div>` W { c m S A } 9;value对应的字数: </div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
datz F b ^ 3 $ 4a: function () {
return {value: ''}
},
methods: {
ps://www.fons.com.cn/tag/for" target="_blank">forward: function() {
alert('发送成功!');
}
},
computed: {
count: function() {
}
}
})
</script>
</html>

回答

<!DOCTYPE html>
<htm0 A e Jl lang="en">
<head><script src="https://cdn.bootcss.com~ a ? s g ( C 8 ,/vue/2.5.2/vue.min.js">1 b J E j;- , M W M $  g</script>
    <meta charset=[ l 1 ; G 9"UTF-8">
    <title>作业一</title>
</head>
<body>
    <div id="app">
        <input type="text" v-modt C /el="value"& b 1 2 m C v-on:input="input">
        <input type="button" value="发送">
        <dV o ? U $ ?iv>value对应的值: {) | K X 6 1 L e{value}}&l1 O ? 7 Ut;/div&gW B 3 ]t;
        <div>value对应的字数:{{val| w ~ue.length}} &l- . m s G M At;/div>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: function () {
            return { value: '' }
        },
        methods: {
            forward: functio4 5 9n () {
                alert('发送成功!');
            }, input: function (e) {
                var el = e.target;j O 5 S w ) A ^
                el.style.borderColor = el.value ? 'inheritG ? T  0  t' : '#f00'
            }
        },
        computed: {
            count: funL I q o | _ u x @ction () {

            }
        }
    })
<% l [ l/script>
</html>