绑定元素名称

最新推荐文章于 2024-07-22 15:13:59 发布

77不吃香菜.

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量71

点赞数 3

文章标签： vue.js

本文链接：https://blog.csdn.net/luna_H/article/details/138302119

版权

绑定元素名称使用v-bind:属性名 == :属性名

绑定事件

v-on:事件 == @事件

注：事件名称一定不要加on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            font-size: 50px;
            color: red;
        }
        .box2{
            font-size: 30px;
            color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        {{userName}}----{{this.userName}}
        <!-- 绑定元素名称使用v-bind:属性名 == :属性名 -->
        <a v-bind:href="http">访问链接</a>
        <a :href="https">访问链接</a>
        <h1>{{func()}}</h1>
        <!-- 绑定事件
        v-on:事件 == @事件 
        注：事件名称一定不要加on-->
        <button v-on:click="func1(1)">点击1</button>
        <button @click="func1(2)">点击2</button>
        <h1 :class="sty">我现在点击的是{{num}}</h1>
        <h1 :style="boss[0]">绑定样式style</h1>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    Vue.config.productionTip = false;
    var userName = "李四";
    var vm = new Vue({
        // el:"#app",
        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"
                    }
                ]
            }
        },
        // 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);
            }
        },
    })
    vm.$mount("#app");
</script>
</html>