叶子同学777
2020-10-03 18:05
采纳率: 66.7%
浏览 142

修改代码,使得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>
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • 已采纳
    <!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>
    
    打赏 评论

相关推荐 更多相似问题