前端框架Vue----设置样式_vue 设置一个样式对象-CSDN博客

本文链接：https://blog.csdn.net/weixin_45228198/article/details/121914259

设置class样式

class样式动态切换

给一个样式：

<div class='basic' v-bind:class="s1">随机选择样式</div>
<div class="basic" :class='s1'>随机选择样式</div>

只需动态改变s1的值即可驱动页面改变样式，动态为class追加类属性
在这里插入图片描述
代码如下：

<!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>设置样式</title>
    <script src="/static/js/vue.js"></script>
</head>
<body>
    <style>
        .basic{
            width: 200px;
            height: 200px;
        }
        .c1{
            box-shadow: 1px;
            background-color: pink;
        }
        .c2{
            border-radius: 10%;
            background-color: lightblue;
        }
        .c3{
            border-radius: 10%;
            background-color: lightyellow;
        }
    </style>
    <div id="container">
        <!-- v-bind:class='' 添加类属性 -->
        <div class='basic' :class="s1"></div>
        <br>
        <button @click='changeStyle'>点击切换样式</button>
    </div>

    <script>
        Vue.config.productionTip = false
        new Vue({
            el: "#container",
            data: {
                s1: 'c1', //属性必须先定义，再使用
            },
            methods: {
                changeStyle(event){
                    // 随机选择一种样式
                    const arr = ['c1', 'c2', 'c3']
                    this.s1 = arr[Math.floor(Math.random()*3)]
                },
            },
        })
    </script>
</body>
</html>

给一个样式数组：

<div class='basic' :class="classArr"></div>
//classArr: ['c1', 'c2',....]  同时应用这几个样式

给一个样式对象：

<div class='basic' :class="classObj"></div>
//classObj: {c1: true, c4:true, c3:false}  哪些用，哪些不用

设置style样式

<div class='basic' :style="styleObj"></div>
//styleObj: {fontSize:'30px', color:'red', }

条件渲染

v-if = ‘js表达式’

<div v-if='true'>显示具体内容</div>
<div v-if='false'>不显示</div>

显示时，则将节点对象挂载到DOM树
不显示时，将节点对象删除
若频繁地操作某个节点的显示、隐藏，需要频繁地挂载、删除节点，效率会受到影响。

多个条件判断：(必须是一整块代码，不能断连)

<div v-if='js表达式'>content1</div>
<div v-else-if='js表达式'>content2</div>
<div v-else>content3</div>

v-show = ‘js表达式’：
同样控制节点的显示、隐藏，这里通过display来控制，DOM节点还在。操作频率高时，性能不会受到影响。

<div v-show='true'>显示</div>

条件渲染案例

输入框中输入一个用户，则显示该用户的信息。
输入tom，则显示‘tom info’
输入jack，则显示’jack info’
其他则显示’lucy info’

<!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>条件渲染</title>
    <script src="/static/js/vue.js"></script>
</head>
<body>
    <div id="container">
        <input type="text" class="username" name='username' placeholder="输入用户名" v-model="name">
        <br>
        <br>
        <!-- 显示用户信息，使用template不影响页面节点结构 -->
        <template v-if='true'>
            <div v-if='name=="tom"'>
                tom info
            </div>
            <div v-else-if='name=="jack"'>jack info</div>
            <div v-else>lucy info</div>
        </template>
    </div>

    <script type='text/javascript'>
        Vue.config.productionTip = false

        new Vue({
            el: "#container",
            data: {
                name: '',
            },

        })
    </script>
</body>
</html>

在这里插入图片描述

列表渲染

数组的操作：

const arr = []
arr.unshift('tom') //左侧插入一个或者多个
arr.shift() //左侧弹出一个
arr.push(1,2,3) //右侧追加 一个、对个
arr.pop() //右侧弹出一个

//遍历
for(var i in arr){console.log(i)} //i 为索引
for(let i in arr){console.log(i)} //i为索引
arr.forEach(i=>{console.log(i)}) //i 为元素
arr.map(i=>{return i**2}) //i 为元素

//遍历对象
const obj = {name:"jack", age:23}
for(let i in obj){console.log(i)} //i 为key

Vue中的数组、对象的遍历：

<ul>
	//遍历数组，e 是数组中的每个元素
	<li v-for="e in arr">{{ e }}</li>
	<li v-for='(e,idx) in arr'>{{ e }}--{{ idx }}</li>
	//遍历对象，先获取value
	<li v-for='(v,k) in {name:"jack",age:23}'>{{v + "-" + k}}</li>
	<li v-for='v in {name:"jack",age:23}'>{{ v }}</li>
	//in 也可以用 of
	//同样的方法还可以遍历字符串（char,idx）, 遍历指定次数，如10-->'(num,idx) of 10'; 只不过用的少
</ul>

实现如下效果：
在这里插入图片描述
代码实现：

<!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>列表渲染</title>
    <script src="/static/js/vue.js"></script>
</head>
<body>
    <div id="container">
        <!-- Vue遍历的数组中的元素；原生的js遍历的是索引 -->
        <span :style="{display:'block',}">Vue遍历的数组中的元素；原生的js遍历的是索引</span>
        <ul v-bind:style="{listStyleType:'none'}">
            <li v-for="p in persons">{{p}}</li>
        </ul>
        <ul>
            <li v-for="(p,idx) in persons" :key="idx">{{p}}--{{idx}}</li>
        </ul>
        <!-- Vue遍历对象时，直接获取value；原生js获取key-->
        <span :style="{display:'block'}">Vue遍历对象时，直接获取value；原生js获取key</span>
        <ul>
            <li v-for="v in obj">{{ v }}</li>
        </ul>
        <ul>
            <li v-for="(v,k) in obj" :key="k">{{v}}--{{k}}</li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false

        new Vue({
            el: "#container",
            data: {
                persons: [
                {id:"001", name:"jack", age:23},
                {id:"002", name:"tom", age:24},
                {id:"003", name:"lucy", age:20},
                ],
                obj: {name:"jack", age:23, sex:"male"},
            },
        })
    </script>
</body>
</html>

key的作用

唯一标识一个虚拟DOM节点，在数据变化后，需要重新渲染虚拟DOM时，便于使用Differ算法进行前后对比。首先看指定key的虚拟DOM之前是否存在，存在则前后DOM逐一对比，相同的部分直接重用，不同的部分新建；指定key不存在的虚拟DOM则直接创建出来。
最后统一渲染真实DOM。
而用户可操作的DOM均为真实DOM

使用索引作为key的问题

使用索引作为key，实现如下页面，然后在数组的头部插入一个数据对象，查看效果。
在这里插入图片描述
点击 ‘添加一个人’，在数组的头部添加一个人的信息

<!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>列表渲染</title>
    <script src="/static/js/vue.js"></script>
</head>
<body>
    <div id="container">
        <!-- Vue遍历的数组中的元素；原生的js遍历的是索引 -->
        <span :style="{display:'block',}">Vue遍历的数组中的元素；原生的js遍历的是索引</span>
        <ul v-bind:style="{listStyleType:'none'}">
            <li v-for="p in persons">{{p}}</li>
        </ul>
        <ul>
            <li v-for="(p,idx) in persons" :key="idx">{{p}}--{{idx}}</li>
        </ul>
        <!-- Vue遍历对象时，直接获取value；原生js获取key-->
        <span :style="{display:'block'}">Vue遍历对象时，直接获取value；原生js获取key</span>
        <ul>
            <li v-for="v in obj">{{ v }}</li>
        </ul>
        <ul>
            <li v-for="(v,k) in obj" :key="k">{{v}}--{{k}}</li>
        </ul>

        <!-- 测试key的作用 -->
        <br>
        <span :style="{display:'block'}">测试key的作用</span>
        <ul :style="{listStyleType:'none',}">
            <li v-for="(p,idx) in persons" :key="idx">{{p.name}}--{{p.age}}&nbsp;<input type="text"></li>
        </ul>
        <br>
        <button @click="add">添加一个人</button>
    </div>
    <script>
        Vue.config.productionTip = false

        new Vue({
            el: "#container",
            data: {
                persons: [
                {id:"001", name:"jack", age:23},
                {id:"002", name:"tom", age:24},
                {id:"003", name:"lucy", age:20},
                ],
                obj: {name:"jack", age:23, sex:"male"},
            },
            methods: {
                add(event){
                    const p = {id:'000', name:"lauf", age:20}
                    this.persons.unshift(p)
                },
            },
        })
    </script>
</body>
</html>