Vue的笔记二

最新推荐文章于 2024-07-05 11:27:33 发布

灯莘

最新推荐文章于 2024-07-05 11:27:33 发布

阅读量192

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js 笔记 javascript

本文链接：https://blog.youkuaiyun.com/2201_75867247/article/details/136751818

本文详细介绍了在Vue.js中如何使用v-bind进行元素属性绑定，v-on处理事件，以及如何定义和调用data和methods中的函数，展示了数据驱动视图的基本概念。

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

一、绑定元素
1.使用v-bind:属性名 == :属性名
举例：

<a v-bind:href="http">访问链接</a>

2.绑定事件
（1）v-on:事件 == @事件
注：事件名称一定不要加on
举例：

<button v-on:click="func1(1)">点击1</button>
        <button @click="func1(2)">点击2</button>

（2）

<h1 :class="sty">我现在点击的是{{num}}</h1>
        <h1 :style="boss[0]">绑定样式style</h1>

（3）

 data(){
            return{
                userName:"张三",
                http:"http://www.baidu.com",
                https:"https://v2.cn.vuejs.org/v2/api/#methods",
                num:"",
                sty:"",
                // boss:"border:5px solid orange;color:green;"
                // boss:{
                //     border:"5px solid orange",
                //     color:"pink",
                //     // textAlign:"center"
                //     "text-align":"right"
                // }
                boss:[
                    {
                        border:"5px solid pink"
                    },
                    {
                        color:"red"
                    }
                ]
            }
        },

3.methods处理的函数方法

   methods: {
        func(){
            console.log(1111111);
            return 1111111;
        },
        func1:function(user){
            if(user==1){
                this.num = 1;
                this.sty = "box1";
                console.log(222222222);
            }else {
                this.num = 2;
                this.sty = "box2"
                console.log(333333333);
            }
        },
        // func1:()=>{
        //     console.log(111111111);
        //     console.log(this);
        //     console.log(this.userName);
            // this.num = 1;
            // this.sty = "box1";
            // console.log(222222222);
        // },
        func2(){
            this.num = 2;
            this.sty = "box2"
            console.log(333333333);
        }
    },
})