vue.js

最新推荐文章于 2024-06-12 08:41:10 发布

承諾太轻

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量38

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_67901663/article/details/130534612

版权

数据双向绑定

作用

数据双向绑定

原理

通过数据劫持结合发布订阅者的模式和Object.defineproprety()来劫持各个属性的setter和getter，如果数据有变动就发布消息给订阅者触发监听。

vue样式使用

数组

//css代码：
     .box {
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
        }

        .red {
            color: gold;
        }
        .fs40 {
            font-size: 40px;
        }
//html代码：
    div id="app">
        <div :class="class2">今天下雨了</div>
        <button @click="change">change</button>
    </div>
//vue代码：    
    <script src="./vue-2.4.0.js"></script>
    <script>
      let vm = new Vue({
        el: '#app',
        data: {
            class2: ['box', 'red'],
        },
        methods: {
            change() {
                this.class2.push('fs40')
            }
        }
      })
    </script>

三目表达式

//css代码：
     .box {
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
        }

        .red {
            color: gold;
        }
        .fs40 {
            font-size: 40px;
        }
//html代码：
    div id="app">
        <div :class="flag?'red':'fs40'">今天下雨了</div>
    </div>
//vue代码：    
    <script src="./vue-2.4.0.js"></script>
    <script>
      let vm = new Vue({
        el: '#app',
        data: {
           flag: true,
        },
        methods: {
        
        }
      })
    </script>

数组内置对象

//css代码：
     .box {
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
        }

        .red {
            color: gold;
        }
        .fs40 {
            font-size: 40px;
        }
//html代码：
    div id="app">
        <div :class="class3">今天下雨了</div>
    </div>
//vue代码：    
    <script src="./vue-2.4.0.js"></script>
    <script>
      let vm = new Vue({
        el: '#app',
        data: {
           class3: [{ 'box': true, 'fs40': true }]
        },
        methods: {
        
        }
      })
    </script>

直接通过对象

//css代码：
     .box {
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
        }

        .red {
            color: gold;
        }
//html代码：
    div id="app">
        <div :class="{'box':true}"> 今天下雨了</div>
    </div>
//vue代码：    
    <script src="./vue-2.4.0.js"></script>
    <script>
      let vm = new Vue({
        el: '#app',
        data: {
           class3: [{ 'box': true, 'fs40': true }]
        },
        methods: {
        
        }
      })
    </script>

内联样式

数组

//html代码：
   <div id="app">
        <div :style="[style1,style2]">今天真好</div>
        <button @click="change">change</button>
    </div>
//vue代码：
<script src="./vue-2.4.0.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            style1: { color: 'gold' },
            style2: { fontSize: '30px' },
        },
        methods: {
            change() {
                this.style1.color = 'green'
                this.style1.fontSize = '40px'
            }
        }
    })

对象

//html代码：
   <div id="app">
        <div :style="style1">今天真好</div>
    </div>
//vue代码：
<script src="./vue-2.4.0.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            style1: { color: 'gold' },
        },
        methods: {
        
        }
    })

函数的返回值

//html代码：
   <div id="app">
        <div :style="getStyle(1)">今天真好</div>
    </div>
//vue代码：
<script src="./vue-2.4.0.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            
        },
        methods: {
           getStyle(Number) {
                console.log(Number);
                return {
                    color: 'pink'
                }
            }
        }
    })