八、class 与 style 绑定（2）
本章概要
- 绑定内联样式
- 对象语法
- 数组语法
- 多重值
- 实例：表格奇偶行应用不同样式
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>
渲染结果如下：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！