Vue样式绑定_vue 样式绑定-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_80278139/article/details/144408485

一、class属性绑定

1、对象语法

这里有三种的形式：
1、内联绑定：即将元素的class属性直接绑定为对象的形式。

这里的代码是把style中的active属性直接以对象的方式放进去了。

这里是把<span v-bind:class="{active : book.active}">这里面的active后方的参数为boolean，赋值为true时就会呈现这个class属性。这里还可以加入多个class属性，只要中间加入一个逗号即可。

<style>
.active{
height:100px;
line-height:100px;
color:#FF0000
}
</style>

<div id="example">
	<div>
		<div class="item" v-for="book in books">
			<img v-bind:src="book.image">
			<span v-bind:class="{active : book.active}">{{book.bookname}}</span>
		</div>
	</div>
</div>
<script type="text/javascript">
var vm = new Vue({
	el:'#example',
	data:{
		books : [{//定义图书信息数组
			bookname : '零基础学JavaScript',
			image : 'images/javascript.png',
			active : true
		},{
			bookname : '零基础学HTML5+CSS3',
			image : 'images/htmlcss.png',
			active : false
		},{
			bookname : 'JavaScript精彩编程200例',
			image : 'images/javascript200.png',
			active : false
		},{
			bookname : 'HTML5+CSS3精彩编程200例',
			image : 'images/htmlcss200.png',
			active : true
		}]
	}
})
</script>

2、非内联绑定

这里的非内联的形式是将元素的class属性绑定的对象定义在data选项中。这里的是直接把对象的名放入进去对class属性进行了赋值。

    <style>
        .color{
            color:#6699FF;
        }
        .size{
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="box" :class="classObject">
    Vue样式
</div>
<script>
    var vm = new Vue({
        el : '#box',
        data : {
            classObject :{
                size : true,
                color : true
            }
        }
    })
</script>

3、使用计算属性返回样式对象

这里和上面的类似，只是这里的是放入了一个计算属性，也是类似于一个对象的感觉。

  <style>
    .color{
      color:#6699FF;
    }
    .size{
      font-size: 12px;
    }
  </style>
</head>
<body>
<div id="box" :class="show">
  Vue样式
</div>
<script>
  var vm = new Vue({
    el : '#box',
    data : {
      size: true,
      color: true
    },
    computed : {
      show : function (){
        return {
          size : this.size,
          color: this.color
        }
      }
    }
  })
</script>

2、数组语法

1、普通形式

这里需要数组中的值都是对象的键值对形式，值需要是需要绑定的class属性对象，前面的键放入到数组中。

  <style>
    .color{
      color:#6699FF;
    }
    .size{
      font-size: 12px;
    }
  </style>
</head>
<body>
<div id="box" :class="[size,color]">
  Vue样式
</div>
<script>
  var vm = new Vue({
    el : '#box',
    data : {
      size : 'size',
      color : 'color'

    }
  })
</script>

2、在数组中使用条件运算符

  <style>
    .color{
      color:#6699FF;
    }
    .size{
      font-size: 12px;
    }
  </style>
</head>
<body>
<div id="box" :class="[size ? 'size' : '',color]">
  Vue样式
</div>
<script>
  var vm = new Vue({
    el : '#box',
    data : {
        size : true,
        color : 'color'
    }
  })
</script>

3、数组中使用对象

这里的意思就是数组中还可以放入对象，和之前的class语法一样，对其赋值布尔值判断。

  <style>
    .color{
      color:#6699FF;
    }
    .size{
      font-size: 12px;
    }
  </style>
</head>
<body>
<div id="box" :class="[{size : size},color]">
  Vue样式
</div>
<script>
  var vm = new Vue({
    el : '#box',
    data : {
        size : true,
        color : 'color'
    }
  })
</script>

二、内联样式style绑定

这里都是和上面的是重复的，就是单纯的换成了style样式，不一样的是这里大多是多个style属性的打包成的对象。进行的赋值也是直接对象的形式放入。

<div id="example">
	<div>
        <form v-bind:style="searchForm">
            <input v-bind:style="searchInput" type="text" placeholder="搜索">
            <input v-bind:style="searchButton" type="submit" value="搜索">
        </form>
    </div>
</div>
<script type="text/javascript">
var vm = new Vue({
	el:'#example',
	data:{
		searchForm : {//表单样式
			border: '2px solid #F03726',
    		'max-width': '670px'
		},
		searchInput : {//文本框样式
			'padding-left': '5px',
			height: '46px',
			width: '78%',
			outline: 'none',
			'font-size': '12px',
			border: 'none'
		},
		searchButton : {//按钮样式
			height: '46px',
			width: '20%',
			float: 'right',
			background: '#F03726',
			color: '#F5F5F2',
			'font-size': '18px',
			cursor: 'pointer',
			border: 'none'
		}
	}
})
</script>

上机实验：

这里用的就是计算属性的方式来传style属性。
这里的作用是想将一个组件按修饰的对象来分修饰的styles属性。

<div id="example">
	<div v-bind:style="[baseStyle, fontStyle, styleRadius]">
		<h4>枫桥夜泊</h4>
		<p>
			月落乌啼霜满天，<br>江枫渔火对愁眠。<br>姑苏城外寒山寺，<br>夜半钟声到客船。
		</p>
	</div>
</div>
<script type="text/javascript">
var vm = new Vue({
	el:'#example',
	data:{
		width : 400,
		margin : '10px auto',
		padding : 30,
		bgcolor : 'lightblue',
		family : "华文楷体",
		fontSize : 36,
		color : 'green',
		align : 'center',
		border : '1px solid #CCCCCC',
		boxShadow : '3px 3px 6px #999999',
		mode : 'vertical-rl'//垂直方向自右而左的书写方式
	},
	computed: {
		baseStyle: function () {//基本样式
			return {
				width: this.width + 'px',
				margin: this.margin,
				padding: this.padding + 'px',
				'background-color': this.bgcolor
			}
		},
		fontStyle: function(){//字体样式
			return {
				'font-family': this.family,
				fontSize: this.fontSize + 'px',
				color: this.color,
				'text-align': this.align
			}
		},
		styleRadius: function () {
			return { 
				border: this.border,//边框样式
				'box-shadow': this.boxShadow,//边框阴影
				'writing-mode': this.mode//书写方式
			}
		}
	}
})
</script>