2. 程式人生 > >Vue框架小案例和bootstrap框架的css樣式

Vue框架小案例和bootstrap框架的css樣式

阿新 • • 發佈：2019-01-04

在這裡插入圖片描述

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
 
 <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content
 
="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css">
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
 

        <div id="app">
            <!-- {{test}} -->
            <div class="panel panel-primary">
                    <div class="panel-heading">新增品牌</div>
            </div>
            <div id="app" class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-body">
                        <!-- <p>...</p> -->
                    <!-- ID:<input type="text" placeholder="ID" v-model="ID"> 品牌名稱:<input type="text" placeholder="品牌名稱" v-model="lastName"> <button @click="update">新增</button> -->
                    <form class="form-inline">
                        <div class="form-group">
                            <label for="exampleInputName2">ID</label>
                            <input type="text" class="form-control" id="exampleInputName2" placeholder="ID" v-model="id">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail2">品牌名稱</label>
                            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="品牌名稱" v-model="pinpai">
                        </div>
                        <button type="submit" class="btn btn-default" @click="updateP" style="background: #3CA9C4; color: white ">新增</button>
                    </form>
                </div>
                <!-- Table -->
                <table class="table">
                    <tr>
                        <td class="active" style="">ID</td>
                        <td class="success">品牌名稱</td>
                        <td class="warning">操作(Operation)</td>
                    </tr>
                    <tr v-for="(p, index) in content" :key="index">
                        <td>{{p.ID}}</td>
                        <td>{{p.pinpai}}</td>
                        <td><button @click="deleteP(index)">刪除</button></td>
                    </tr>
                </table>
            </div>
        </div>
        <script src="" async defer></script>
        <script type="text/javascript" src="vue.js"></script>
        <script type="text/javascript">
            new Vue({
                el:'#app',
                data:{
                    test:'這是一個測試資料',
                    id:'',
                    pinpai:'',
                    content:[
                        {ID:'1',pinpai:'賓士'},
                        {ID:'2',pinpai:'寶馬'}
                    ]
                },
                methods: {
                    deleteP(index){
                        this.content.splice(index, 1);
                    },
                    updateP(){
                        this.content.push({ID:this.id,pinpai:this.pinpai})
                    }
                },
            })
        </script>
    </body>
</html>

相關推薦

Vue框架小案例和bootstrap框架的css樣式

<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]>

整合django和bootstrap框架

word log ons 替換 shee head base 版本 fin 環境: python版本:2.7.8 django版本:1.7.1 bootstrap版本:3.3.0 首先github上面有兩個開源的項目用來整合django和bootstrap. ht

ssm框架小案例

簡介 Spring+SpringMVC+MyBatis框架（SSM）是比較熱門的中小型企業級專案開發的框架，對於新手來說也是比較容易學習入門的。雖說容易，但在框架搭建過程中仍然遇到了許多問題，因此用例項記錄下來吧。 例項 第一步——導包 Spring框架包及其依賴包&nbs

flask框架小案例

前言 資料庫db_ab 表tbl_authors、tbl_books flask補充：id預設情況，從1開始，自動增長 程式碼（app.py） # -*- coding:utf-8 -*- from flask import Flask, render_template, u

vue.js的axios和ssm框架後臺控制器傳參的問題

前臺的寫法是這樣的，注意不用設定content-type。就用原來的axios的資料傳輸格式：json後臺的寫法是這樣使用requestbody註解能夠接收到 不加他接收不到、後來學習了springmvc的HttpMessageConverter<T>介面，才瞭解

vue中引入jQuery和bootstrap

main var tst web jquery vid con oot boot 引入 $ npm install jquery bootstrap --save jquery 1.加入webpack對象 var webpack = require(‘webpack‘

Vue 中引用JQ 和 bootstrap 以及關閉eslint語法

1.關閉eslint語法 webpack.base.conf.js 內查詢到eslint相關內容，刪除 const createLintingRule = () => ({ // 刪除了elint，關閉了ES6語法檢測 }) 2.npm安裝 jq.bootstra

20180426-vue反選案例和陣列去重

let flag = true;                                 //定義flag為全選 for(var i = 0; i < List.length; i++){ //遍歷陣列 if(!List[

重修課程day54（bootstrap之css樣式）

mit tip erro context ups highlight tac esc boot 一 bootstrap的介紹 　Bootstrap是將html，css和js的代碼打包好了，只管我們拿來調用。是基於jquery開發的。 　使用BootCDN提供的免費CDN加速

關於bootstrap中css樣式與自己設置的css樣式相撞問題

找到 審查 頁面 可能 網頁 設置 顯示效果 顯示 元素 1.在對網頁進行布局前就先將bootstrap包中的東西導入到自己的頁面中去。自己定義的css樣式導入在bootstrap之後，可以起到當類名與bootstrap重復時對bootstrap樣式踐行覆蓋的作用。 2.盡

Bootstrap——全域性CSS樣式

1、.container 為頁面內容和柵格系統包裹.container容器，響應式，大屏固定寬度且居中，小屏百分百自適應。 2、.row . col-*-* Bootstrap中定義了一套響應式的網格系統，將一個容器劃分成12列，然後通過col-*-*的類名控制每一列的佔比（每列寬度

引入 ECharts和Bootstrap的bootcdn樣式表路徑

<!DOCTYPE html> <html><head> <meta charset="utf-8"> <title>運營報表</title> <link rel="stylesheet" href

Bootstrap全域性CSS樣式之表單

.form-control——將單獨的表單控制元件賦予一些全域性樣式，如預設寬度width:100%； .form-group——包裹表單控制元件，獲得最好的排列； .form-inline——將表單設定為內聯表單，只適用於視口（viewport）至少在 768px 寬度時

JS和jquery操作css樣式

在寫js的時候經常弄混掉js和jquery對樣式操作的方法，這裡總結一下：JS方法：1.直接設定style屬性，設定 !important值無效，如果屬性值有 “ - ”改成小駝峰寫法(textAlign)或者 element.style['text-align']= '10

vue中v-html中標籤新增CSS樣式

在Vue元件中，我們可以使用<style scoped>標籤來新增針對該元件的CSS樣式。 <template> <div class="foo"> <div v-html="myHtml"></

bootstarp分頁外掛 bootstrapv3.css 與 bootstrap.min.css 樣式衝突

  今天在優化自己的部落格專案時，發現啦一個頁面中的bug，就花了點時間解決。主要是bootstrap 響應式佈局的問題，在拖拽頁面大小的時候，發現選單欄的展示在一定的寬度時，會出現如下圖的情況

js中currentStyle和getComputedStyle獲取css樣式區別

js中獲取樣式我瞭解到三種。一種是通過obj.offsetAttr來獲取樣式，通過這種方法來獲取元素的寬高時，如果沒有邊框，可以正確獲取，如果使用邊框屬性則會出現問題，為了解決這個問題，可以使用另一種方法，通過getComputedStyle屬性來獲取cs

BootStrap常用CSS樣式的程式碼示例

Bootstrap常用的樣式的程式碼示例 樣式表引入的注意事項 jquery.js是bootstrap.js的基礎，引入js檔案時必須先引入jquery.js. 後引入jquery.js錯誤程式碼:Uncaught Error

淺談Jquery和常用框架Vue變化

v-on items method NPU his new jquer ID 常用 區別 數據與視圖的分離 數據驅動視圖 Vue 簡單示例: <div id="example-1"> <input v-model="tit

MyBatis框架入門小案例（關於用mybatis框架對數據庫的增刪改查）

throw gets ioe ssa 靜態代碼塊 文件 boolean 實現 where 1.新建一個maven項目，建好相對應的包，在https://mvnrepository.com中導入MyBatis需要的依賴，復制到配置文件中 2.在resources文件下