Vue中的三种绑定方式

最新推荐文章于 2023-07-13 00:05:52 发布

未及545

最新推荐文章于 2023-07-13 00:05:52 发布

阅读量1.8k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_72760247/article/details/127294107

版权

1.属性绑定

 <script src="./vue.js"></script>

    <div id="app">
        <!-- 绑定 图片的src-->
        <img :src="myimg" alt="">
    </div>

    <script>

        new Vue({
            el: '#app',
            data: {
                // 图片的路径地址
                myimg:'./img/b3.jpg'
            }
        })

2.对象绑定

  <style>
        .box{
            border: 1px solid red;
        }
        .one{
            color: red;
        }
        .two{
            font-size: 20px;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <script src="./vue.js"></script>
    <div class="app">
        <button @click="change">改变样式</button>
        <!-- 在对象绑定中，one是页面渲染的css类名 one后面的值是可受vue动态驱动的 -->
        <!-- .box类名加的样式是默认不变的，则后面是可动态变化的-->
        <ul class="box" :class={one:color,two:font}>
            <li>做出改变</li>
            <li>做出改变</li>
            <li>做出改变</li>
            <li>做出改变</li>
        </ul>

    </div>
    <script>
        const vm=new Vue({
            el:".app",
            data:{
                color:true,
                font:true,
            },
            methods:{
                change(){
                    this.color=!this.color
                    this.font=!this.font
                }
            }
        })
    </script>

3.数组绑定

<style>
        .box{
            border: 1px solid red;
        }
        .one{
            color: red;
        }
        .two{
            font-size: 20px;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <script src="./vue.js"></script>
    <div class="app">
        <button @click="change">改变样式</button>
    
        <!-- .box类名加的样式是默认不变的，则后面是可动态变化的-->
        <!-- class数组里面的是vue data里的属性名 -->
        <ul class="box" :class=[color,font]>
            <li>做出改变</li>
            <li>做出改变</li>
            <li>做出改变</li>
            <li>做出改变</li>
        </ul>

    </div>
    <script>
        const vm=new Vue({
            el:".app",
            data:{
                color:"one",
                font:"two",
            },
            methods:{
                change(){
                    // 此处用三元表达式对数组变化进行判断判断
                    this.color=this.color=="one"?"":"one"
                    this.font=this.font=="two"?"":"two"
                }
            }
        })
    </script>