脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue动态style 拼接宽度

vue 动态style 拼接宽度问题

 更新时间：2022年09月23日 09:53:10   作者：赵四_  
这篇文章主要介绍了vue 动态style 拼接宽度问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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组件简易模拟实现购物车

    Vue组件简易模拟实现购物车

    这篇文章主要为大家详细介绍了Vue组件简易模拟实现购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 关于axios配置多个请求地址(打包后可通过配置文件修改)

    关于axios配置多个请求地址(打包后可通过配置文件修改)

    这篇文章主要介绍了关于axios配置多个请求地址(打包后可通过配置文件修改)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • Vue使用fabric.js实现局部截图与大图预览功能

    Vue使用fabric.js实现局部截图与大图预览功能

    这篇文章主要为大家详细介绍了Vue如何使用fabric.js实现局部截图与el-image-viewer大图预览功能,文中的示例代码讲解详细,感兴趣的可以了解下
    2024-02-02
  • 新版vue-cli模板下本地开发环境使用node服务器跨域的方法

    新版vue-cli模板下本地开发环境使用node服务器跨域的方法

    这篇文章主要介绍了新版vue-cli模板下本地开发环境使用node服务器跨域的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • vue项目打包解决静态资源无法加载和路由加载无效(404)问题

    vue项目打包解决静态资源无法加载和路由加载无效(404)问题

    这篇文章主要介绍了vue项目打包，解决静态资源无法加载和路由加载无效(404)问题,静态资源无法使用，那就说明项目打包后，图片和其他静态资源文件相对路径不对,本文给大家介绍的非常详细，需要的朋友跟随小编一起看看吧
    2023-10-10
  • vue实现一个炫酷的日历组件

    vue实现一个炫酷的日历组件

    公司业务新开了一个商家管理微信H5移动端项目，日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据。下面小编给大家带来了基于vue实现一个炫酷的日历组件，感兴趣的朋友参考下吧
    2018-10-10
  • 使用vue实现猜谜卡片游戏

    使用vue实现猜谜卡片游戏

    这篇文章主要为大家详细介绍了如何使用vue实现简单的猜谜卡片游戏,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以参考一下
    2023-09-09
  • 第一个Vue插件从封装到发布

    第一个Vue插件从封装到发布

    这篇文章主要为大家详细介绍了第一个Vue插件从封装到发布的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-11-11
  • Vue Router修改query参数url参数没有变化问题及解决

    Vue Router修改query参数url参数没有变化问题及解决

    这篇文章主要介绍了Vue Router修改query参数url参数没有变化问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • element 实现导航栏收起展开功能及思路

    element 实现导航栏收起展开功能及思路

    这篇文章主要介绍了element 实现导航栏收起展开功能，实现思路先给 el-menu加上 :collapse="isCollapse" 属性，这个属性也是 element 上的一个参数，意思为是否开启折叠动画，在 data 中定义 isCollapse ，用 true 和 false 控制展开与收起，需要的朋友可以参考下
    2023-01-01

最新评论