Rumah > hujung hadapan web > View.js > Bagaimana untuk menetapkan gaya dalam vue

Bagaimana untuk menetapkan gaya dalam vue

青灯夜游
Lepaskan: 2021-10-27 15:15:45
asal
15431 orang telah melayarinya

Kaedah: 1. Gunakan atribut gaya teg untuk menambah gaya sebaris; 2. Gunakan arahan "v-bind" untuk menetapkan gaya gaya melalui pengikatan; dengan sintaks ":style ="obj"" atau ":style="[obj,obj1...]"".

Bagaimana untuk menetapkan gaya dalam vue

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Gaya set Vue

1 Tambah gaya sebaris terus

2 Tetapkan gaya melalui pengikatan

3 sebagai gaya (atribut vue boleh berbilang)

<div id="box">
            <!--直接添加样式-->
            <p style="background-color: blue;">sssss</p>
            <!--绑定样式-->
            <p v-bind:style="&#39;background-color: red;&#39;">sssss</p>
            <!--将vue中的属性作为样式设置-->
            <p :style="obj">sssss</p>
            <!--将多个属性作为样式设置-->
            <p :style="[obj,obj1]">sssss</p>
        </div>
        <script type="text/javascript">
            var vm=new Vue({
                el:"#box",
                data:{
                    obj:{
                        backgroundColor:"gold"
                    },
                    obj1:{
                        fontSize: "30px"
                    }
                },
            });
        </script>
Salin selepas log masuk

Cadangan berkaitan: "tutorial vue.js"

Atas ialah kandungan terperinci Bagaimana untuk menetapkan gaya dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan