Vue初步

最新推荐文章于 2024-07-16 17:20:09 发布

绝迹刻本

最新推荐文章于 2024-07-16 17:20:09 发布

阅读量59

点赞数

分类专栏：学习记录文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_73890636/article/details/133681438

版权

学习记录专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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>
</head>
<body>
    <!-- 第一步：id为app的容器 -->
     <div id ="app">
            <div>hello,{{name}}</div>
            <div>我今年{{age}}岁</div>
            <button @click="showInfo">按钮</button>
            <button @click ="showInfo2">年龄++</button>
     </div>

     <!-- 第二部，引入vue.js -->
     <script src=".js/vue.js"></script>
     <script>
        //初始化Vue实例对象
        const vm = new Vue({
                e1:"#app",
                data(){
                    return{
                        name:"Vue.js",
                        age:88
                    }
                },
            //方法相关的函数
            methods: {
                showInfo(){
                    this.age=88
                },
                showInfo2(){
                    this.age++
                }
            },
        })
     </script>
</body>
</html>

computed:计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 第一步：id为app的容器 -->
     <div id ="app">
            <p>总价格：{{totalPrice}}</p>
            <p>单价：{{price}}</p>
            <p>数量：{{num}}</p>

            <button @click ="num==0?0:num--">减少数量</button>
            <button @click ="num++">增加数量</button>
     </div>

     <!-- 第二部，引入vue.js -->
     <script src="./js/vue.js"></script>
     <script>
        //初始化Vue实例对象
        const vm = new Vue({
                el:"#app",
                data(){
                    return{
                
                        price:20,
                        num:0
                    }
                },
        computed:{
            totalPrice(){
                return this.price*this.num

            }
        }
           
        })
     </script>
</body>
</html>

实时显示计算