Vue模版语法

素心如月桠

已于 2023-08-03 09:27:55 修改

阅读量420

点赞数

文章标签： vue.js javascript 前端

于 2023-08-02 16:50:42 首次发布

本文链接：https://blog.csdn.net/m0_47010003/article/details/132054717

版权

接下来学习@click

例题：修改背景颜色

例题：反复点击button按钮，可以不断切换背景颜色

先看以下例题是回顾vue的用法

<body>
    <div id="box">
        {{myname}} - {{myage}}
    </div>
    <script>
       var vm = new Vue({
        el:"#box",
        data:{
            myname:"lyx",
            myage:26
        }
       })
    </script>

</body>

运行结果如下：vue对象被挂载到vm实例上
通过在控制台直接vm.属性名修改

接下来学习@click

可以看到@click形式是对v-on:click的简写

<a v-on:click="doSomething"> ... </a>

<!-- 简写 -->
<a @click="doSomething"> ... </a>

vue对象的el、data、methods属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 在线导入 -->
    <!-- 开发环境版本，包含了用帮助的命令行警告 -->
    <script src="../vue/vue.js"></script>
</head>

<body>
    <div id="box">
        {{myname}} - {{myage}}
        <button @click="handleChange()">点我控制台输出</button>
    </div>
    <script>
       var vm = new Vue({
        el:"#box",
        data:{
            myname:"lyx",
            myage:26
        },
        methods:{
            handleChange(){
                console.log("哈哈哈哈哈哈哈哈哈");
            }

        }//定义所有事件方法
       })
    </script>

</body>

</html>

在handleChange()方法里面对myname和myage的值进行修改，点击button页面刷新可以看到：

    <div id="box">
        {{myname}} - {{myage}}
        <button @click="handleChange()">click me</button>
    </div>
    <script>
       var vm = new Vue({
        el:"#box",
        data:{
            myname:"lyx",
            myage:26
        },
        methods:{
            handleChange(){
                console.log("哈哈哈哈哈哈哈哈哈");
                vm.myname = "xmq";
                vm.myage = 22;

            }

        }//定义所有事件方法
       })
    </script>

通过this.myname、this.myage来修改值

运行结果如下：

例题：修改背景颜色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 本地导入 -->
    <script src="../vue/vue.js"></script>
    <style>
        .bgRed {
            background: #da3939;
            height: 100px;
            width: 100px;
        }

        .bgBlue {
            background: #4dddd1;
            height: 100px;
            width: 100px;
        }
    </style>
</head>

<body>

    <div id="box">
        {{myname}} - {{myage}}
        <button @click="handleChange()">click me</button>
        <div :class="whichcolor"></div>
    </div>
    <script>
        new Vue({
            el: "#box",
            data: {
                myname: "lyx",
                myage: 26,
                whichcolor: "bgRed"
            },
            methods: {
                handleChange(t) {
                    console.log("哈哈哈哈哈哈哈哈哈", this);
                    this.myname = "xmq";
                    this.myage = 22;
                    this.whichcolor = "bgBlue";

                }

            }//定义所有事件方法
        })
    </script>

</body>

</html>

例题：反复点击button按钮，可以不断切换背景颜色

效果如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 本地导入 -->
    <script src="../vue/vue.js"></script>
    <style>
        .bgRed {
            background: #da3939;
            height: 100px;
            width: 100px;
        }

        .bgBlue {
            background: #4dddd1;
            height: 100px;
            width: 100px;
        }
    </style>
</head>

<body>

    <div id="box">
        {{myname}} - {{myage}}
        <button @click="handleChange()">click me</button>
        <div :class="whichcolor"></div>
        <br />
        <div :class="isColor?'bgRed':'bgBlue'"></div>
    </div>
    <script>
        new Vue({
            el: "#box",
            data: {
                myname: "lyx",
                myage: 26,
                whichcolor: "bgRed",
                isColor: true
            },
            methods: {
                handleChange(t) {
                    console.log("哈哈哈哈哈哈哈哈哈");
                    this.myname = "xmq";
                    this.myage = 22;
                    this.whichcolor = "bgBlue";
                    this.isColor = !this.isColor;

                }

            }//定义所有事件方法
        })
    </script>

</body>

</html>