vue-绑定class样式-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_57226103/article/details/128807103
<!DOCTYPE html>
<html lang="en">
<head>
    <title>vue绑定class练习</title>
    <style>
        .basic{
            width: 200px;
            height: 200px;
            color: black;
            background-color: blue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .style1{
            border: 10px solid red;
        }
        .style2{
            border-radius: 100px;
        }
    </style>
    <!--<style>标签应该放在<head>标签里面。原因：因为浏览器解析HTML文档是自上而下的，这样<style>标签里的样式就会作用到
    body里的元素上。如果<style>标签写在<body>标签下面，在这之前的元素的样式就不会生效，会导致页面结构出来了，而CSS还没开始渲染。 -->
    <script src="./node_modules/vue.js"></script>
</head>
<body>
    <div id="root">
        <div class="basic" :class="dynamicStyle" @click="changestyle">{{cont}}</div>
        <!-- 字符串写法 -->
        <br/>
        <div class="basic" :class="dynamicStyle_Arr" @click="changestyle2">{{cont}}</div>
        <!-- dynamicStyle_Arr.shift()删除第一个-->
        <!-- dynamicStyle_Arr.push()末尾插入-->
        <!-- 数组写法 -->
        <br/>
        <div class="basic" :class="dynamicStyle_Object" @click="changestyle3">{{cont}}</div>
        <!-- 对象写法 -->
    </div>
</body>
<script>
    Vue.config.productionTip = false
    new Vue({
        el:'#root',
        data:{
            cont:'vue绑定class练习',
            dynamicstyle:'',
            dynamicStyle_Arr:['样式1','样式2', '样式3'],
            dynamicStyle_Object:{
                样式1: true,
                样式1: true,
            }
        },
        methods:{
            changestyle(){
                let styleArr=['style1','style2']
                let styleNum=Math.floor(Math.random()*2)
                this.dynamicStyle=styleArr[styleNum]
            }
        }
    })
</script>
<!--<script>标签一般放在<body>标签里面的最底部。原因：如果你希望JavaScript的代码在HTML页面的内容加载完成之前就加载，
    则将<script>标签放在<head>标签里；如果你希望等到页面所有内容加载完成之后，再来加载JavaScript，则将<script>标签放在<body>标签里。
    如果<script>标签放在<body>标签之前，会造成页面阻塞。如果<script>标签涉及DOM操作，应该放在<body>标签里面的最底部。 -->
</html>