vue 实现根据data中的属性值来设置不同的样式

style动态赋值

margin-top的值 根据choosePaperFlag的值来设置 利用三元表达式

补充知识：vue 条件判断绑定内联样式

当需要判断条件来绑定内联样式时 可以三元运算符判断，然后绑定一个对象

:style="!areaCode || !phoneNumber || !receivedCode || !verification
? '{backgruond:#ccc}' : $store.state.store.config.background"

以上这篇vue 实现根据data中的属性值来设置不同的样式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue.js样式动态绑定实现小结

    在项目中,我们时常会遇到动态的去绑定操作切换不同的CSS样式,结合自身项目中遇到的一些情况,也参考了一些文档,针对vue.js样式的动态绑定切换做出如下小结: 动态切换的核心思想: 利用vue指令v-bind来实现动态绑定,从而设置切换不同的样式- vue的最大特点是数据驱动,利用特殊的语法将DOM"绑定"到底层数据,DOM与数据保持同步,每当数据发生变化,DOM视图就会做出相应的更新和响应,正是基于这种特性,我们得以实现class和style的动态绑定- (一定要充分理解数据驱动的含

  • 一文读懂vue动态属性数据绑定（v-bind指令）

    v-bind的基本用法 一.本节说明 前面的章节我们学习了如何向页面html标签进行插值操作,那么如果我们想动态改变html标签的属性,该怎么办呢? 这就是我们这节开始要讲的内容v-bind. 二. 怎么做 ":"为v-bind的简写形式,也可称为语法糖 三. 效果 四. 深入 在上图中将a标签的href属性值设置为toutiao,VUE实例将自动去data里面寻找toutiao属性进行值绑定. 不只是a标签,所有的html标签属性都可以通过v-bind进行值绑定,然后通过改变数据动态

  • 在VUE style中使用data中的变量的方法

    最近项目中的公共组件,在复用的时候,针对不同的场景,需要不断变更CSS里样式的值,而且已经有了全局的公共组件样式了 如果用vue传统的动态绑定class和style的方式去修改样式(文末会提到),需要额外写很多变量和模块class,那如果我的样式的值,可以从父组件,传到子组件,子组件根据传入值去渲染对应样式的值,其实就是要再style中使用data和props中的变量,这要怎么做呢? 其实很简单,只需要三步,大家来看: 1.HTML结构 <Upload ref="upload"

  • vue根据条件不同显示不同按钮的操作

    我就废话不多说了,大家还是直接看代码吧~ <template slot-scope="scope"> <el-button v-if="scope.row.isDeleted === 0" @click="lowerShelf(scope.row.id)" size="mini" type="primary" plain>下架</el-button> <el-but

  • vue 实现根据data中的属性值来设置不同的样式

    style动态赋值 margin-top的值 根据choosePaperFlag的值来设置 利用三元表达式 补充知识:vue 条件判断绑定内联样式 当需要判断条件来绑定内联样式时 可以三元运算符判断,然后绑定一个对象 :style="!areaCode || !phoneNumber || !receivedCode || !verification ? '{backgruond:#ccc}' : $store.state.store.config.background" 以上这篇vu

  • Vue 子组件更新props中的属性值问题

    Vue 子组件更新props中的属性值问题

    目录 Vue子组件更新props的属性值 .sync属性 v-model应用 Vue子组件中修改Props的几种情况 针对以上几种情况再逐一进行分析 结果展示 结论 Vue子组件更新props的属性值 在子组件中更新props中的属性值,并且更新到父组件,有两种实现方式:.sync 和 自定义v-model .sync属性 父组件在给子组件传值时,属性名后需要加修饰符.sync,格式 :子组件props属性名.sync 父组件 <template> <div id="app&q

  • Vue.js 利用v-for中的index值实现隔行变色

    首先定义好样式,利用v-for中的index值,然后绑定样式来实现隔行变色效果. 以下为完整代码,很简单,但也是个技巧. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&

  • JS返回iframe中frameBorder属性值的方法

    本文实例讲述了JS返回iframe中frameBorder属性值的方法.分享给大家供大家参考.具体分析如下: frameborder 属性规定是否显示框架周围的边框. <!DOCTYPE html> <html> <body> <iframe id="myframe" src="/default.asp" frameborder="0"> <p>Your browser does not

  • js获取页面引用的css样式表中的属性值方法(推荐)

    如下所示: function getStyle(node, property){ if (node.style[property]) { return node.style[property]; } else if (node.currentStyle) { return node.currentStyle[property]; } else if (document.defaultView && document.defaultView.getComputedStyle) { var s

  • JS和jQuery通过this获取html标签中的属性值(实例代码)

    废话不多说了,具体代码如下所示: <html> <head> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script type="text/javascript"> /** JQUERY 通过当前标签属性名,获取属性的值 */ function attrsByJquery(obj){ var

  • js简单遍历获取对象中的属性值的方法示例

    js简单遍历获取对象中的属性值的方法示例

    本文实例讲述了js简单遍历获取对象中的属性值的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • vue 清空input标签 中file的值操作

    template中: <input type="file" ref="pathClear" @change="onUpload" name="file" id="file"> methods中: onUpload(){ this.$refs. pathClear.value ='' }, 补充知识:将input file的选择的文件清空的两种解决方案 上传文件时,选择了文件后想清空文件路径,搜索

  • Java比较两个对象中全部属性值是否相等的方法

    例如下述Java类: import java.io.Serializable; import java.util.List; public class Bean_Topology implements Serializable { private static final long serialVersionUID = 1L; public static long getSerialversionuid() { return serialVersionUID; } private Long to

  • vue如何修改data中的obj数据的属性

    目录 修改data中的obj数据的属性 修改data以实现数据响应式 怎么保证你的变化我Vue能监听到? 如果初始值没给这个变量Vue还能监听吗? 修改data中的obj数据的属性 //方法一 var obj = this.obj; obj.name = 'long'; this.obj = obj; //方法二 Vue.set(this.obj, "password", "num"); //part1,要修改的obj对象; //part2,要添加或者修改的属性;

随机推荐