Vue-4-属性

来源：互联网发布：行政级轿车知乎编辑：程序博客网时间：2024/06/05 23:42
<!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>
阅读全文
'); })();