vue 动态style 拼接宽度问题

2025-01-13 19:44:29

vue 动态style 拼接宽度

大众用法：

：style=" { width:30px } "

因为项目涉及到进度条用行内样式拼接宽度

其中item.progressNum 是后台返回的数据，

vue style的用法

Vue中style的用法总结如下：

v-bind:style 简写:style

1.基本用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <script src="vue.js"></script>
    <script>
        window.οnlοad=function(){
            new Vue({
                el:'#box',
                data:{

                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <strong :style="{color:'red'}">文字...</strong>
    </div>
</body>
</html>

描述：

<strong :style="{color:'red'}">文字...</strong>

其中的red是class的

结果：

2.采用数组形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <script src="vue.js"></script>
    <script>
        window.οnlοad=function(){
            new Vue({
                el:'#box',
                data:{
                    c:{color:'red'}
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <strong :style="[c]">文字...</strong>
    </div>
</body>
</html>

描述：

采用数组的形式，设置变量c,在data中以对象的形式设置style属性

结果：

3.使用数组的形式，设置多个属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <script src="vue.js"></script>
    <script>
        window.οnlοad=function(){
            new Vue({
                el:'#box',
                data:{
                    c:{color:'red'},
                    b:{backgroundColor:'blue'}
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <strong :style="[c,b]">文字...</strong>
    </div>
</body>
</html>

描述：

和第二种一样，可以设置多个属性

结果：

4.使用设置一个变量的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <script src="vue.js"></script>
    <script>
        window.οnlοad=function(){
            new Vue({
                el:'#box',
                data:{
                    a:{
                        color:'red',
                        backgroundColor:'gray'
                    }
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <strong :style="a">文字...</strong>
    </div>
</body>
</html>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

关于vue src路径动态拼接的小知识

目录 vue src路径动态拼接第一种:本地添加第二种:从接口中获取图片的路径如何通过变量动态拼接url vue src路径动态拼接我是新手今天写vue 的时候让这个src 给我弄的懵懵本来打算弄个轮播图加路径但是怎么也不显示第一种:本地添加如果需要很多图片一直加div就很烦所有我就把所有图片写在数组里面注意引入图片路径一定要加 require 一定要加 require 一定要加 require 然后我用了mint-ui里面的轮播组件使用v-for 把图片路径循环出
Vue动态获取width的方法

vue里想用Bootstrap的进度条, <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:
vue中的style样式如何动态绑定

目录 style样式如何动态绑定动态设置style样式 style样式如何动态绑定方法一: (1) html中: <div class="videoMa" ref="videoMa" style="width:100%;height:100%;"> <div id="playWnd" class="playWnd" :style="{width:videoBox.wid
vue style width a href动态拼接问题的解决

style width 这个问题折磨了我一个上午了好惭愧因为项目涉及到进度条所以必须用行内样式 style 用过vue的都知道 vue中style的用法大众用法 :style=" { width:30px } " 但是现在涉及到拼接了直接上代码了其中list是我data循环的数据这是一个比例的关系公开是拼接的时候一直是报错的一直出现文本 ' } ' = > 类似这些的东西很显然是拼接的问题于是继续拼接但是还是变着花样地出现这些鬼东西于是发现只要
vue 动态style 拼接宽度问题

目录 vue 动态style 拼接宽度 vue style的用法 1.基本用法 2.采用数组形式 3.使用数组的形式,设置多个属性 4.使用设置一个变量的方法 vue 动态style 拼接宽度大众用法: :style=" { width:30px } " 因为项目涉及到进度条用行内样式拼接宽度其中item.progressNum 是后台返回的数据, vue style的用法 Vue中style的用法总结如下: v-bind:style 简写:style 1.基本用法 <!
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制

思路 : 动态路由实现:在导航守卫中判断用户是否有用户信息, 通过调用接口,拿到后台根据用户角色生成的菜单树, 格式化菜单树结构信息并递归生成层级路由表并使用Vuex保存,通过 router.addRoutes 动态挂载到 router 上,按钮级别的权限控制,则需使用自定义指令去实现. 实现: 导航守卫代码: router.beforeEach((to, from, next) => { NProgress.start() // start progress bar to.meta
vue动态加载本地图片的处理方法

发现问题今天遇到一个在vue文件中引入本地图片的问题,于是有了这篇文章. 通常,我们的一个img标签在html中是这么写的: <img src="../images/demo.png"> 这种写法只能引用相对路径下的图片.不能使用绝对路径.使用绝对路径的话,这类资源将会直接被拷贝,而不会经过 webpack 的处理. 如果src是变量的话,我们一般会在data中定一个变量src进行动态绑定. <img :src="src"> //data中
vue语法之拼接字符串的示例代码

本文介绍了vue语法之拼接字符串的示例代码,分享给大家,具体如下. 先来一行代码: <div class="swiper-slide" v-for="item in message"> <img v-bind:src="['xxx(需要拼接的字符串)'+item.picurl]" alt="" width="100%" height="245" /> </d
jquery动态改变div宽度和高度

完整代码: 复制代码代码如下: <!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"> <head> <title>jque
Vue动态实现评分效果

本文实例为大家分享了Vue动态实现评分效果的具体代码,供大家参考,具体内容如下 1.图片分为三种 on:half: off <style> .star{ font-size: 0; } .star-item{ display: inline-block; background-repeat: no-repeat; width: 20px; height: 20px; margin-right: 22px; background-size: 100%; } .star-item.on{ back
jquery实现动态改变div宽度和高度

完整代码: <!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"> <head> <title>jquery动态改变div宽度
jQuery判断浏览器并动态调整select宽度的方法

本文实例讲述了jQuery判断浏览器并动态调整select宽度的方法.分享给大家供大家参考,具体如下: <!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实现样式之间的切换及vue动态样式的实现方法

前言既然我们选择了vue,那么在做东西时就不要想着去操作dom,所有的都交给vue来解决. 下面来说一个很简单但是很常用的效果,可能人人都会用到这样的需求请看下图导航栏的样式切换功能,如果我们使用jquery之类的东西来写,可能要写好多代码,那么我们用vue呢, 代码如下 html 附上vue中style与class绑定API <div id="wrap" class="box"> <div v-for="(list,index)