使用Jquery与vuejs操作dom比较

最新推荐文章于 2023-04-04 18:06:04 发布

转载最新推荐文章于 2023-04-04 18:06:04 发布 · 1.5k 阅读

文章标签：

#jquery #dom #vue-js

Jquery及其组件专栏收录该内容

147 篇文章

订阅专栏

本文通过实例展示了使用jQuery和Vue.js实现列表项添加功能的方法。jQuery直接操作DOM元素，代码简洁；Vue.js则利用数据绑定更新视图，虽然初始设置较为复杂，但有利于维护并提高了DOM复用率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery实现添加功能

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>aaa</title>
        <script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                var textbda = $("#textbd").val();
                $("#btn1").click(function() {
                    $("ol").append("<li>"+textbda+"</li>");
                });
            });
        </script>
    </head>

    <body>
        <ol>
            <li>添加项目 1</li>
        </ol>
        <input id="textbd" type="text" value="aaaa" />
        <button id="btn1">添加</button>
    </body>

</html>

vue.js(v1.0)实现添加功能

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>bbb</title>
        <script src="https://npmcdn.com/vue/dist/vue.js"></script>
    </head>

    <body>

        <div id="app">
            <input v-model="newTodo">
            <button v-on:click="addTodo">添加</button>
            <ul>
                <li v-for="todo in todos">
                    <span>{{ todo.text }}</span>
                </li>
            </ul>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    newTodo: '',
                    todos: [{
                        text: '添加项目 1'
                    }]
                },
                methods: {
                    addTodo: function() {
                        var text = this.newTodo.trim()
                        if(text) {
                            this.todos.push({
                                text: text
                            })
                            this.newTodo = ''
                        }
                    }
                }
            })
        </script>
    </body>

</html>