修改代码，使得input框输入内容后，div部分value的值同步显示 、input框输入后，div部分value对应字数同步显示输入内容的字数 、当input框没有内容时，div部分value对应的值不显示，同时input框边框为红色
问题描述：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><title>作业一</title>
</head>
<body>
<div id="app">
<input type="text" v-model="value">
<input type="button" value="发送">
<div>value对应的值: </div>
<div>value对应的字数: </div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: function () {
return {value: ''}
},
methods: {
forward: function() {
alert('发送成功!');
}
},
computed: {
count: function() {
}
}
})
</script>
</html>
答
<!DOCTYPE html>
<html lang="en">
<head><script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<meta charset="UTF-8">
<title>作业一</title>
</head>
<body>
<div id="app">
<input type="text" v-model="value" v-on:input="input">
<input type="button" value="发送">
<div>value对应的值: {{value}}</div>
<div>value对应的字数:{{value.length}} </div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: function () {
return { value: '' }
},
methods: {
forward: function () {
alert('发送成功!');
}, input: function (e) {
var el = e.target;
el.style.borderColor = el.value ? 'inherit' : '#f00'
}
},
computed: {
count: function () {
}
}
})
</script>
</html>