Vue.js：使用v-bind为多个元素绑定style样式案例

使用v-bind为多个元素绑定单个style

此案例主要是通过v-bind：style在元素上绑定单个style，实现为元素设置不同的样式的效果。当在浏览器中的页面进行显示的时候，如果不勾选复选框，则显示如下图1所示的内容，如果勾选复选框，则文本在添加阴影之后的效果如图2所示。

相关代码实现

<!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>使用v-bind为多个元素绑定单个style</title><script src="../BLBL笔记/lib/vue.min.js"></script>
</head>
<body><div id="app"><label><input type="checkbox" v-model = "myChecked">是否显示阴影</label><br /><br /><div v-bind:style="myChecked?{textShadow:myShadow}:'' "><h3>入我相思门，知我相思苦，长相思兮长相忆，短相思兮无穷极</h3></div></div><script>   var app = new Vue({el:"#app",data:{myChecked:false,myShadow:'3px 5px 5px #656b79'}})</script>
</body>
</html>

相关代码实现

<!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>使用v-bind为多个元素绑定内敛style</title><script src="../BLBL笔记/lib/vue.min.js"></script>
</head>
<body><div id="app"><label><input type="checkbox" v-model = "myChecked">是否启用内联样式</label><br /><br /><div v-bind:style="myChecked?{textShadow:myShadow,fontStyle:myItalic}:'' "><h3>入我相思门，知我相思苦，长相思兮长相忆，短相思兮无穷极</h3></div></div><script>   var app = new Vue({el:"#app",data:{myChecked:false,myShadow:'5px 2px 6px #000000',myItalic:'italic'}})</script>
</body>
</html>

相关代码实现

<!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>使用v-bind通过数组绑定多个style</title><script src="../BLBL笔记/lib/vue.min.js"></script>
</head>
<body><div id="app"><p><label><input type="checkbox" v-model = "myChecked1">阴影</label><label><input type="checkbox" v-model = "myChecked2">水平镜像</label></p>  <img src="./image/lingxiaohu1223.jpg" v-bind:style = "[myChecked1?{boxShadow:myShadow}:'',myChecked2?{transform:myTransform}:'']"></div></div><script>   var app = new Vue({el:"#app",data:{myChecked1:false,myChecked2:false,myShadow:'10px 10px 10px rgba(0,0,0,.5)',myTranform:'rotateY(180deg)'}})</script>
</body>
</html>

================================

使用v-bind通过对象绑定多个style

相关代码实现

<!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>使用v-bind通过对象绑定多个style</title><script src="../BLBL笔记/lib/vue.min.js"></script>
</head>
<body><div id="app"><p><label><input type="checkbox" v-model = "myChecked1">阴影</label><label><input type="checkbox" v-model = "myChecked2">错切</label></p>  <img src="./image/lingxiaohu1223.jpg" v-bind:style = "myObject"></div></div><script>   var app = new Vue({el:"#app",data:{myChecked1:false,myChecked2:false},computed: {myObject() {return {boxShadow:this.myChecked1?'10px 10px 10px rgba(0,0,0,.5)':'',transform:this.myChecked2?'skewX(30deg)':''}}}})</script>
</body>
</html>

案例效果图

================================

所以，有关v-bind对style所有的绑定方式大概就这么多了，仅供参考，代码都可以正常运行的~

Vue.js：使用v-bind为多个元素绑定style样式案例相关推荐

Vue.js框架学习—绑定style样式
一.对象写法模板和Vue实例 <body><div id="root"><div :style="styleObj">{{ ...
Vue项目在标签中如何书写多个内敛style样式
Vue项目在标签中如何书写多个内敛style样式例如:对一个数组进行循环,我想给偶数项的添加红色背景,奇数项的添加蓝色背景,这时候就可以用v-bind:style="[]",详细 ...
【说人话】真正意义上讲清楚了如何用$emit()在Vue.js的自定义组件中实现v-model=“”双向绑定
子组件sg-component.vue代码 <template><div class="sg-component"><button @click=&q ...
js清空文本框的值_一个Vue.js实例控制字变大变小，含样式操作，flex布局。「603」...
这是一个用vue.js对css操作完成的实例. 当然用了flex简单布局. 一.先创建一个html文件,记得添加vue库文件. 二.创建一盒容器vmdiv,用vue绑定它,测试vue绑定后的插入值te ...
vue.js基础知识篇(4):过滤器、class与style的绑定2
代码下载:网盘欢迎私信第一章:过滤器过滤器是对数据进行处理并返回结果的函数. 1.语法语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做 ...
Vue.js从0开始到实战开发1：通过简单案例从0开始了解Vue
Vue与静态页面的对比静态页面一般是这样的代码:网页上所有的东西都是直接写死的不会改变. 如果把网页上一些需要根据数据请求结果动态变化的内容用一个变量(或者叫做占位符代替)那么这个网页就变成了动态内 ...
23.Vue绑定style样式
目录 1.style样式对象写法 2.style样式数组写法 3.总结 22.Vue绑定class样式_爱米酱的博客-CSDN博客为了讲好class样式,我们这里提前准备了7个样式作为例子来讲解. b ...
vue中绑定style样式的方式
vue中绑定样式的方式有多种下面就来看看吧开始之前先准备一些样式 css样式 <style>.red {color: red}.green {color: green}.big {fo ...
vue js删除数组中指定索引的元素
在前端开发中,我们经常需要对数组进行操作,增删改是经常的事情,那我们js中该如何删除指定的下标元素呢???? 我们用splice来操作 1.定义和用法 splice() 方法用于添加或删除数组中的元素 ...

Vue.js：使用v-bind为多个元素绑定style样式案例

Vue.js：使用v-bind为多个元素绑定style样式案例相关推荐

最新文章

热门文章