zoukankan html css js c++ java

Vue.js绑定内联样式

1.对象语法

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>无标题文档</title>
</head>

<body>
    <!--<div id="box" :style="{color:activeColor, font-size:size}">用短横分隔是会报错</div>-->
    <div id="box" :style="{color:activeColor, fontSize:size, textShadow:shadow}">没有短横分隔不报错</div>

    <div id="box2" :style="styleObject">工作睡觉吃饭</div>
</body>
</html>
<script type="text/javascript">
    // v-bind:style 的对象语法十分直观--非常像CSS，其实它是一个Javascript对象，CSS属性名必须用驼峰命名法（官方文档写的是既可以用驼峰也可以用 短横分隔命名法），但是用短横分隔是会报错的
    var vm= new Vue({
        el:'#box',
        data:{
            activeColor:'#f00',
            size:'30px',
            shadow:'5px 2px 6px #000'
        }
    })

    var vm= new Vue({
        el:'#box2',
        data:{
            styleObject:{
                color:'red',
                fontSize:'30px'
            }
        }
    })
</script>

效果图

2.数组语法

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>无标题文档</title>
</head>

<body>
    <div class="box" :style="[styleObjectA, styleObjectB]">好好学习，天天向上</div>
</body>
</html>
<script type="text/javascript">
    // 可将多个样式对象应用到一个元素上
    var vm2= new Vue({
        el:'.box',
        data:{
            styleObjectA:{
                fontSize:'36px',
                color:'blue'
            },
            styleObjectB:{
                textDecoration:'underline'
            }
        }
    })
</script>

效果图：

3.添加图片src地址

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>无标题文档</title>
</head>

<body>
    <!--
    下面这种写法不会显示图片，会报错，推荐第二种写法
    <img class="box" src="{{url}}" >
    -->

    <img class="box" :src="url" >
</body>
</html>
<script type="text/javascript">
    var vm= new Vue({
        el:'.box',
        data:{
            url:'https://bbsfiles.vivo.com.cn/vivobbs/attachment/forum/201809/12/005629z489rqqeeyle7gje.jpg.thumb.jpg'
            }
        })
</script>

效果图：

查看全文

相关阅读:
关于SUID、SGID、Sticky（转载）
对Linux下TCP连接相关配置的优化记录（转载）
ACL权限设置（转载）
如何把一个命令加入到某个用户sudo的列表中（转载）
菜鸟的逆袭目标
 菜鸟的逆袭自我介绍
 Weekly Work from表单练习
 CSS属性display的值及其描述
 CSS Position
电源防反接保护电路

原文地址：https://www.cnblogs.com/Strive-count/p/9643062.html