作业vue练习

最新推荐文章于 2025-10-30 11:30:18 发布

原创最新推荐文章于 2025-10-30 11:30:18 发布 · 268 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文通过一个简单的Vue.js实例展示了如何使用Vue的事件绑定和方法来改变元素样式，以及结合jQuery进行DOM操作。点击按钮可以实现背景颜色变换、字体大小设置以及字符串反转展示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body >
    <div id="app"> 
        <button @click="changeColor">上色</button>
        <button @click="changeSize">设置字体</button>
        <div class="pre">内容为: {{content}}</div>

        <div class=" after" @click="reverseStr" v-bind:style="str">反转后内容为: {{reverseContent}}</div>  

        <div class="total">反转前内容为 {{content}} ，反转后内容为 {{reverseContent}} </div>
    </div>
    
    <script src="vue.min.js"></script>
    <script src="JQuery.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data : {
                content : "你好，欢迎学习vue" ,
                reverseContent : "" ,
                str : "font-size: 20px;"
            },
            methods : {
                reverseStr : function(){
                    var arr = this.content.split("");
                    arr.reverse();
                    this.reverseContent = arr.join("");
                } ,
                changeColor : function(){
                    $("#app div").css("background-color" , "blue");
                } ,
                changeSize : function(){
                    $("#app div").eq(1).css("font-size" , "20px");
                }
            }
        });

    </script>
</body>
</html>