vue-5——样式绑定_html-js-css

文章目录 class与style的绑定先准备几个style样式绑定class样式绑定style样式完整demo

class与style的绑定

先准备几个style样式

<style>
    .basic {
        width: 300px;
        height: 100px;
        border: 1px solid #000;
    }
    
    .happy {
        border: 4px solid red;
        background-color: orange;
        background: linear-gradient(30deg, orange, pink, yellow, orangered);
    }
    
    .sad {
        border: 2px solid green;
    }
    
    .normal {
        background-color: skyblue;
    }
    
    .demo1 {
        font-size: 30px;
    }
    
    .demo2 {
        background-color: green;
    }
    
    .demo3 {
        border-radius: 20px;
    }
style>

绑定class样式

<div id="root">
        
        <div class="basic" :class="mood" @click="changeMood">{{name}}div><br><br>

        
        <div class="basic" :class="classArr" @click="">{{name}}div>
        <button @click="add1">移除样式1button>
        <button @click="add2">移除样式2button>
        <button @click="add3">移除样式3button>
        <button @click="del1">添加样式1button>
        <button @click="del2">添加样式2button>
        <button @click="del3">添加样式3button>
        <br><br>

        
        <div class="basic" :class="classObj">{{name}}div><br><br>
        <button @click="usedemo1">使用demo1button>
        <button @click="usedemo2">使用demo2button>
    div>

 Vue.config.productionTip = false;
    const vm = new Vue({
        el: "#root",
        data: {
            name: 'feliks',
            mood: 'normal',
            classArr: ['demo1', 'demo2', 'demo3'],
            classObj: {
                demo1: false,
                demo2: false
            } 
        },
        methods: {
            changeMood() {
                const arr = ['sad', 'normal', 'happy'];
                const index = Math.floor(Math.random() * 3);
                this.mood = arr[index];
            },
            //第二个容器
            add1() {
                vm.classArr.shift(0)
            },
            add2() {
                vm.classArr.shift(1)
            },
            add3() {
                vm.classArr.shift(2)
            },
            del1() {
                vm.classArr.push('demo1')
            },
            del2() {
                vm.classArr.push('demo2')
            },
            del3() {
                vm.classArr.push('demo3')
            },
            //第三个容器
            usedemo1() {
                vm.classObj.demo1 = true
            },
            usedemo2() {
                vm.classObj.demo2 = true
            }
        },
    })

绑定style样式

<div id="root">
        
        <div class="basic" :style="styleObj">{{name}}div><br><br>

        
        <div class="basic" :style="styleArr">{{name}}div>
    div>

Vue.config.productionTip = false;
    const vm = new Vue({
        el: "#root",
        data: {
            name: 'feliks',
            styleObj: {
                fontSize: '40px',
                color: 'red',
            },
            styleArr: [{
                backgroundColor: 'skyblue'
            }, {
                color: 'orange'
            }, {
                fontSize: '50px'
            }]
        },
    })

完整demo

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="../js/vue.js">script>
head>

<body>
    <div id="root">
        
        <div class="basic" :class="mood" @click="changeMood">{{name}}div><br><br>

        
        <div class="basic" :class="classArr" @click="">{{name}}div>
        <button @click="add1">移除样式1button>
        <button @click="add2">移除样式2button>
        <button @click="add3">移除样式3button>
        <button @click="del1">添加样式1button>
        <button @click="del2">添加样式2button>
        <button @click="del3">添加样式3button>
        <br><br>

        
        <div class="basic" :class="classObj">{{name}}div><br><br>
        <button @click="usedemo1">使用demo1button>
        <button @click="usedemo2">使用demo2button>

        
        <div class="basic" :style="styleObj">{{name}}div><br><br>

        
        <div class="basic" :style="styleArr">{{name}}div>
    div>

body>
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: "#root",
        data: {
            name: 'feliks',
            mood: 'normal',
            classArr: ['demo1', 'demo2', 'demo3'],
            classObj: {
                demo1: false,
                demo2: false
            },
            styleObj: {
                fontSize: '40px',
                color: 'red',
            },
            styleArr: [{
                backgroundColor: 'skyblue'
            }, {
                color: 'orange'
            }, {
                fontSize: '50px'
            }]
        },
        methods: {
            changeMood() {
                const arr = ['sad', 'normal', 'happy'];
                const index = Math.floor(Math.random() * 3);
                this.mood = arr[index];
            },
            //第二个容器
            add1() {
                vm.classArr.shift(0)
            },
            add2() {
                vm.classArr.shift(1)
            },
            add3() {
                vm.classArr.shift(2)
            },
            del1() {
                vm.classArr.push('demo1')
            },
            del2() {
                vm.classArr.push('demo2')
            },
            del3() {
                vm.classArr.push('demo3')
            },
            //第三个容器
            usedemo1() {
                vm.classObj.demo1 = true
            },
            usedemo2() {
                vm.classObj.demo2 = true
            }
        },
    })
script>

html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1322973.html

vue-5——样式绑定

发表评论

评论列表（0条）