:style动态设置属性

前段时间做页面时需要动态设置背景图片,每一种框架都会遇见类似的需求,特记录下来,以免不时之需:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            li span {
                width: 100px;
                height: 100px;
                border-radius: 999px;
                border: 1px solid red;
                background-position: center center;
                -webkit-background-size: cover;
                background-size: cover;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <ul id="app">
            <li v-for= "item in a">
                <span :style="{backgroundImage: ‘url(‘ +item.b+ ‘)‘}">111</span>
            </li>
        </ul>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var a= new Vue({
            el: "#app",
            data: {
                a: [{b: ‘./img/gintama.jpg‘},
                {b: ‘./img/glass.jpg‘},
                {b: ‘./img/leader.jpg‘}]
            }
        })
    </script>
</html>

核心代码:

<li v-for= "item in a">
     <span :style="{backgroundImage: ‘url(‘ +item.b+ ‘)‘}">111</span>            
</li>

分析:

:style为字符串类型的对象,在对象内,属性名简写,属性值为字符串类型,即必须带上‘,

而根据vue的语法,使用vue值的时候不需要像angular一样用{{}}包裹

原文地址:https://www.cnblogs.com/yanze/p/8449765.html

时间: 2024-10-11 19:45:15

:style动态设置属性的相关文章

JMeter非GUI方式运行时动态设置线程组及传参

在使用JMeter进行性能测试自动化时,可能会有如下需求: 1.指定运行多少线程,指定运行多少次: 2.访问的目标地址变化了,端口也变化了,需要重新指定. 上面的需求如果有GUI方式运行,这都不是问题,直接在脚本上进行修改即可以了. 但是性能测试自动化是以非GUI方式运行的,如果要修改测试计划就比较麻烦了. 下面来说说如何简单的搞定这些问题: 1.指定运行多少线程   我们知道JMeter测试计划在运行Sampler之前先加载运行属性(jmeter.properties,system.prope

android 怎么动态设置button 的style

网上找了很多,还是没有直接的解决办法,button没有setstyle这个方法.因此我的解决办法如下: 直接动态设置各个属性 Button themeBtn = new Button(this); themeBtn.setText(entry.getKey()); LayoutParams lparams = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.MATCH_PARENT); themeBtn.setLayoutParam

java 反射 根据属性 动态设置值

package com.jhl.jvm.lesson8; import java.lang.reflect.Field; /** * * @author jhl * java 反射 根据属性 动态设置值 demo * */ public class ExceptionLog { private String exceptionLogId; private String processingType; private String type; private String content; pub

js+jquery动态设置/增加/删除/获取元素属性的两种方法集锦对比(动态onclick属性设置+动态title设置)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>

动态设置js的属性

目标:js的属性名可以使用变量 举例:js对象object,当赋给该对象属性的时候可以采用以下方式 var object; object.prop1 = "value1"; object.prop2 = "value2"; 也可以采用如下方式: object.push({prop1:"value1"}); object.push({prop2:"value2"}); 在这里prop1 作为属性名称,可以直接用,也可以加上引号,

style的top属性设置不管用问题

设置了style的top属性,不管用,原代码如下: <input type="text" id="suggestId" value="" style="width:350px;height:25px;top:30px;"> 要加position:absolute,如下: <input type="text" id="suggestId" value="&quo

DELPHI控件具有多个属性的动态设置方法

本人初学DELPHI,遇到了个比较麻烦的问题就是没办法动态设置有多值的控件属性,在网上找了很多资料收获不大,经过自己研究,找到了一些方法,先记录下来以备使用. 1. 控件只有单一属性值设置方法: form1.Align属性有: alNone,alLeft,alRight,alTop,.....等等,在编程中实现方法 方法1:  form1.Align:=alNone; 或 form1.Align:=alRight ..... 方法2: form1.Align:=TAlign(5); 等同于 fo

easyui表单多重验证,动态设置easyui控件

要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字 最终效果如下图: 但在做这个的过程中,遇到了一系列的问题: 扩展validatebox的验证方法,最开始的验证代码如下: 1 //学号格式只能为数字 ****//这里没有问题**** 2 number: {//value值为文本框中的值 3 validator: function (value) { 4 var reg = /^[0-9]*$/; 5 return reg.test(value);

javascript如何动态设置div的样式

javascript如何动态设置div的样式:有时候需要根据需要动态设置div的样式,当然对于稍有经验的javascript开发者来说,这一切都是那么的简单,但是对于初学者或者说没有相关经验的开发者来说可能就是一个不大不小的难关,下面就通过实例简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="aut