input拼接方法之DOM方式和Vue方式

最新推荐文章于 2024-03-21 10:54:26 发布

Ctrl Alt Shift

最新推荐文章于 2024-03-21 10:54:26 发布

阅读量1.1k

点赞数

分类专栏： Web 前端文章标签： vue dom

本文链接：https://blog.csdn.net/weixin_42676530/article/details/104225141

版权

Web 前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

1.DOM方式拼接

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app">
    姓：<input type="text" value="请输入您的姓氏" id="homeName" style="color:#cccccc; outline:none;"value="请输入您的姓氏" onfocus="this.value=''" onblur="this.value='请输入您的姓氏'">
    <br>
    名：<input type="text" value="请输入您的名" id="name" style="color:#cccccc; outline:none;"value="请输入您的名" onfocus="this.value=''" onblur="this.value='请输入您的名'">
    <br>
    结果：<p id="result">娃哈哈</p>
</div>
<script>
    var homeName = document.getElementById('homeName');
    var Name = document.getElementById('name');
    var result = document.getElementById('result');

    homeName.addEventListener('input', handleTextInput);
    Name.addEventListener('input', handleTextInput);

    function handleTextInput() {
        result.innerHTML = homeName.value + Name.value
    }
</script>
</body>
</html>

我这里的input框为了美观加了获得焦点发生事件以及失去焦点触发事件、灰色小字的提示字等直接添加到input标签里(style里的提示字删去效果会更明显)。因为dom操作拼接需要多个id最后字符串相加再回调输出，看着会比较繁琐，使用也不灵活。效果如下：
在这里插入图片描述

2.Vue方式拼接

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    姓：<input type="text"  v-model="familyName"/><br/>
    名：<input type="text" v-model="name"/><br/><br/>
    结果：<p>{{ familyName + name }}</p>
</div>

<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data: {
            familyName:'',
            name:''
        }
    })
</script>

</body>
</html>

Vue方法比较简易便捷，在最大程度上解放了DOM操作。效果如下：
在这里插入图片描述

Ctrl Alt Shift

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
input拼接方法之DOM方式和Vue方式

1.DOM方式拼接代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><div id="app"> 姓...
复制链接

扫一扫

专栏目录