Vue-4-属性

最新推荐文章于 2024-06-01 16:49:07 发布

木木在唱歌

最新推荐文章于 2024-06-01 16:49:07 发布

阅读量244

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/yal23333/article/details/78887782

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>属性</title>
    <script src="../js/vue.js"></script>
    <style>
        .red{
            color: red;
        }
        .black{
            background: black;
        }
        .myred{
            color:green;
        }
    </style>
</head>
<body>

<div id="box">
    <img v-bind:src="url" alt="">
    <!--简写-->
    <img :src="url" alt="" :width="w">
    <hr>
    <!--css 第一种使用方法-->
    <strong :class="[red,blue]">文字1...</strong>
    <!--css 第二种使用方法-->
    <strong :class="{myred:true}">文字2...</strong>
    <strong :class="{myred:false}">文字3...</strong>
    <strong :class="{myred:false,black:true}">文字3...</strong>
    <strong :class="{myred:false,black:a}">文字3...</strong>
    <hr>
    <!--style-->
    <strong :style="[x,y]">文字4...</strong>
    <strong :style="b">文字4...</strong>
</div>




<script>
    window.onload = function () {
        //属性
        new Vue({
            el:'#box',
            data:{
                url:'https://www.baidu.com/img/bd_logo1.png',
                w:"100px",
                red:"red",
                blue:"black",
                a:true,
                x:{color:"red"},
                y:{backgroundColor:"black"},
                b:{color:"red",
                    backgroundColor:"black"
                }
            },
            methods:{
            }
        });
    };
</script>

</body>
</html>

木木在唱歌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-4-属性

<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>属性</title> <script src="../js/vue.js"></script> <style> .red{
复制链接

扫一扫

专栏目录