八、class 与 style 绑定（2）

一只小熊猫呀

已于 2022-09-29 15:42:40 修改

阅读量4.8k

点赞数

分类专栏： # Vue.js 3.0 从入门到实战文章标签：绑定内联样式实例：表格奇偶行应用不同样式

于 2022-09-29 15:39:07 首次发布

本文链接：https://blog.csdn.net/GXL_1012/article/details/127108088

版权

Vue.js 3.0 从入门到实战专栏收录该内容

54 篇文章 10 订阅

订阅专栏

本章概要

绑定内联样式
- 对象语法
- 数组语法
- 多重值
实例：表格奇偶行应用不同样式

8.2 绑定内联样式

使用 v-bind:style 可以给元素绑定内联模式。

8.2.1 对象语法

v-bind:style 的对象语法非常像 HTML 的内联 CSS 样式语法，但其实是一个 JavaScript 对象。
CSS 属性名可以用驼峰式或短横线分割命名。如下：

<div id="app">
   <div v-bind:style="{color : activeColor , fontSize : fontSize + 'px'}">黑色四叶草</div>
</div>
  <script>
  const vm = Vue.createApp({
        data() {
            return {
                color: 'red',
                fontSize: '30px'
            }
        }
    }).mount('#app');
</script>

显然，直接以对象字面量的方式设置 CSS 样式属性代码冗长，且可读性较差。
为此，可以在数据属性中定义一个样式对象，然后直接绑定该对象，这样模板也会更清晰。如下：

<div id="app">
   <div v-bind:style="styleObject">黑色四叶草</div>
</div>
  <script>
  const vm = Vue.createApp({
        data() {
            return {
                styleObject: {
                  color: 'red',
                  fontSize: '30px'
              	}
            }
        }
    }).mount('#app');
</script>

同样地，对象语法也常常结合返回对象的计算属性使用。

8.2.2 数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上。如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>style绑定</title>
	</head>
	<body>
		<div id = "app">
		   <div v-bind:style="[baseStyles, moreStyles]"></div>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			const vm = Vue.createApp({
    		    data() {
    		        return {
    		            baseStyles: {
            		      	border: 'solid 2px black'
            		    },
    					moreStyles: {
    						width: '100px',
    						height: '100px',
    						background: 'orange'
    					}
    		        }
    		    }
		    }).mount('#app');
		</script>
	</body>
</html>

8.2.3 多重值

可以为绑定的 style 属性提供一个包括多个值的数组，这常用于提供多个带前缀的值。如下：

<div :style="{ display: [ '-webkit-box','-ms-flexbox','flex' ] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox ，那么就只会渲染 display:flex

8.3 实例：表格奇偶行应用不同的样式

先定义一个针对偶数行的样式规则。如下：

.even {
  background-color: #cdcdcd;
}

表格数据采用 v-for 指令循环输出，v-for 指令可以带一个索引参数，因此可以根据这个索引参数判断奇偶行，循环索引是从0开始的，对应的是第一行，为了判断简便，将其加 1 后再进行判断。
判断规则为 (index+1)%2 === 0，采用v-bind:class 的对象语法，当该表达式计算为 true 时采用样式类 even。如下：

<tr v-for="(book, index) in books" 
  :key="book.id" :class="{even : (index+1) % 2 === 0}">
  ...
</tr>

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body {
				width: 600px;
			}
			table {
			    border: 1px solid black;
			}
			table {
			    width: 100%;
			}
			th {
			    height: 50px;
			}
			th, td {
			    border-bottom: 1px solid #ddd;
			    text-align: center;
			}
			
			[v-cloak] {
				display: none;
			}
			.even {
				background-color: #cdcdcd;
			}
		</style>
	</head>
	<body>
		<div id = "app" v-cloak>
		   <table>
		    <tr>
		        <th>序号</th>
		        <th>书名</th>
		        <th>作者</th>
		        <th>价格</th>
		        <th>操作</th>
		    </tr>
		    <tr v-for="(book, index) in books" 
		    	:key="book.id" :class="{even : (index+1) % 2 === 0}">
		        <td>{{ book.id }}</td>
		        <td>{{ book.title }}</td>
		        <td>{{ book.author }}</td>
		        <td>{{ book.price }}</td>
		        <td>
		        	<button @click="deleteItem(index)">删除</button>
		        </td>
		    </tr>
	    </table>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			const vm = Vue.createApp({
    		    data() {
    		        return {
    		            books: [
        			    	{
        				      id: 1,
        				      title: '笑场',
        				      author: '李诞',
        				      price: 188
        				    },
                            {
                              id: 2,
                              title: '好吗好的',
                              author: '大冰',
                              price: 168
                            },
                            {
                              id: 3,
                              title: '你只是看起来很努力',
                              author: '李尚龙',
                              price: 139
                            },
                            {
                              id: 4,
                              title: '时间管理大师',
                              author: '罗志祥',
                              price: 89.8
                            }
                        ]
    		        }
    		    },
    		    methods: {
    		    	deleteItem(index){
    			  		this.books.splice(index, 1);
    			  	}
    		    }
		    }).mount('#app');
		</script>
	</body>
</html>