當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

利用vue v-bind属性绑定bootstrap样式以及输出数据

發(fā)布時間：2023/12/10 vue 26 豆豆

生活随笔收集整理的這篇文章主要介紹了利用vue v-bind属性绑定bootstrap样式以及输出数据小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

自從知道了bootstrap，就被他簡介，大氣美觀的樣式吸引，即使在vue框架中，仍舊想使用，下面給出了vue適配版和原版的代碼，以饗讀者

數(shù)據(jù)輸出部分

export default {data(){return {pagestyle:'https://v4.bootcss.com/docs/4.3/dist/css/bootstrap.css',pagecss:'https://v4.bootcss.com/docs/4.3/examples/sticky-footer-navbar/sticky-footer-navbar.css',mytitle:'v-bind bootstrap樣式測試頁',msg:'教練檔案',mycoach:{name:'陳培昌',age:22,expertin:['散打','泰拳']},jinerdidi:{name:'程勁',starinfo:{age:20,favortie:['品鑒河南燴面','和丁大哥一起廝混'],expertin:[{'stand':['散打','泰拳']},{'ground':['巴西柔術(shù)','MMA']}]},},chrouslist:['我不想對你再說些什么','現(xiàn)在是氣憤的我','你是被你的虛偽完全淹沒','變成討厭的顏色','......']}} }

html部分

<template><div id="app"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="description" content=""><meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"><meta name="generator" content="Jekyll v3.8.5"><title v-text="mytitle"></title><link rel="canonical" href="https://v4ing.bootcss.com/docs/4.3/examples/sticky-footer-navbar/"><link v-bind:href='pagestyle' rel="stylesheet">#這里使用了綁定！<link :href='pagecss' rel="stylesheet">#這里使用了綁定的簡寫模式</head><body class="d-flex flex-column h-100"><header><nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"><a class="navbar-brand" href="#">Fixed navbar</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarCollapse"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li></ul><form class="form-inline mt-2 mt-md-0"><input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"><button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button></form></div></nav></header><main role="main" class="flex-shrink-0"><div class="container"><h1 class="mt-5"><div v-text="mytitle"></div></h1>這里也綁定了data輸出里面的值<p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>main > .container</code>.</p><p>Back to <a href="/docs/4.3/examples/sticky-footer/">the default sticky footer</a> minus the navbar.</p></div></main><footer class="footer mt-auto py-3"><div class="container"><span class="text-muted">Place sticky footer content here.</span></div></footer></body></div> </template>

CSS部分

原版bootstrap? html頁面代碼（可以對比上面的代碼進(jìn)行調(diào)整)

<!doctype html> <html lang="en" class="h-100"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="description" content=""><meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"><meta name="generator" content="Jekyll v3.8.5"><title>Sticky Footer Navbar Template · Bootstrap</title><link rel="canonical" href="https://v4ing.bootcss.com/docs/4.3/examples/sticky-footer-navbar/"> <link href="/docs/4.3/dist/css/bootstrap.css" rel="stylesheet"><style>.bd-placeholder-img {font-size: 1.125rem;text-anchor: middle;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}@media (min-width: 768px) {.bd-placeholder-img-lg {font-size: 3.5rem;}}</style><link href="sticky-footer-navbar.css" rel="stylesheet"></head><body class="d-flex flex-column h-100"><header><nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"><a class="navbar-brand" href="#">Fixed navbar</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarCollapse"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li></ul><form class="form-inline mt-2 mt-md-0"><input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"><button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button></form></div></nav> </header> <main role="main" class="flex-shrink-0"><div class="container"><h1 class="mt-5">Sticky footer with fixed navbar</h1><p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>main > .container</code>.</p><p>Back to <a href="/docs/4.3/examples/sticky-footer/">the default sticky footer</a> minus the navbar.</p></div> </main><footer class="footer mt-auto py-3"><div class="container"><span class="text-muted">Place sticky footer content here.</span></div> </footer> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script>window.jQuery || document.write('<script src="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.3/dist/js/bootstrap.bundle.js"></script></body> </html>

轉(zhuǎn)載于:https://www.cnblogs.com/saintdingspage/p/11413087.html

總結(jié)

以上是生活随笔為你收集整理的利用vue v-bind属性绑定bootstrap样式以及输出数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Java技术：SpringBoot实现邮
下一篇：一三五、服务器部署Node项目、Vue