Vue.js進行查詢操作

阿新 • • 發佈：2019-02-12

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="../lib/vue.min.js" type="text/javascript" ></script>
        <title>字元轉換</title>
    </head>
    <body>
        <div id="app">
            請輸入查詢關鍵字：<input 
 type="text" v-model="search" />
            <table>
                <tr>
                    <th>名稱</th>
                    <th>價格</th>
                    <th>數量</th>
                </tr>
                <tr v-for='x in list'>
                    <td 
>{{x.name}}</td>
                    <td>{{x.price}}</td>
                    <td>{{x.num}}</td>
                </tr>
            </table>
        </div>
        <script type="text/javascript">
            var vm=new Vue({
                el:'#app',
                data:{
                /*定義空陣列裝資訊*/ 

                    info:[],
                /*定義變數裝查詢輸入的字串*/
                    search:''
                },
                /*computed比methods效率高，不需要重新渲染頁面*/
                computed:{
                    list:function(){
                        var arr =[];
                        for(var i=0;i<this.info.length;i++){
                            if(this.info[i].name.indexOf(this.search)!=-1){
                                arr.push(this.info[i])
                            }
                        }
                        return arr;

                    }
                }
            })
            for(var i = 1;i<20;i++){
                vm.info.push({name:'手機'+i,price:1000*i,num:i})
            }
        </script>
    </body>
</html>

效果如圖：
這裡寫圖片描述

這裡寫圖片描述

補充：
這裡寫圖片描述

Vue.js進行查詢操作

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

vue.js的基本操作

操作 copy custom events patch erb one lte methods 1.{{message}}輸出data數據中的message。 2.v-for="todo in todos"輸出data數據中的dotos數組 3.v-on:click="aa

vue.js之常操作（實例）

tex styles title oct lar per click 一個 lis 聽說大家都開始用react、vue這些MVVM框架了，為了不落後，還是學學吧！（之前只對angular了解一點，時間一長，也忘得差不多了，所以學習vue相當於從小白開始）從vue.js官網

VUE 結合 vue-resource 進行ajax操作

有意思的！初始化需要ajax獲取資料！搜尋商品需要ajax獲取資料！提交資料需要ajax傳遞資料！有了 vue-resource ，操作挺方便的。這是html <form class="form-horizontal addForm" id="edit_form"&

elasticsearch（二）java 使用同步步方法進行查詢操作

一、基本步驟： 1）建立連線物件： RestHighLevelClient client = new RestHighLevelClient( RestClient.builder(

layui結合Vue.js父子iframe操作

父頁面呼叫子頁面方法彈出框嵌入iframe: layer.open({ type: 2, content: '../UserManage/ST002.html',

學習網站專案學習 - Django & Vue - 後臺進行過濾操作，前端實現課程類別分頁

目錄一、實現思路總結 1-1 實現樣式 1-2 前端傳送分頁資料和課程請求 1-3 後臺路由接收，執行檢視函式 1-4 序列化元件校驗規則 1-5 通用狀態類 1-6 返回前端的資料查詢 1-7 前端獲取資料並渲染頁面二、前端程式碼三、表結構

Hibernate中使用HQL進行查詢操作

注意:HQL語言，是基於物件進行查詢的，不是基於資料庫的表。 1、基本的HQL查詢 1.1 使用HQL查詢的一般步驟 public void test01() { Session session = HibernateUtils.openSession(); Qu

矩形框選進行查詢操作

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <met

JDBC java對MySQL資料庫進行查詢操作，並把查詢的結果輸出

Resultset中的所有資料都可以通過getString()方法取得 String是可以接收表中的任意型別列的內容，所以在以下的程式中全部都使用getString()接收 package JDBC;

Qt 對QTextEdit的文字編輯器進行查詢操作

具體效果是~~~ like 被高亮顯示出來~~~~~~~~ 具體的程式碼就是void MainWindow::show_findText() { QString findtext=f

vue.js 進行初始化遇到的關於core-js的錯誤@core-js/modules/es6.array.find-index]

span ins mirrors error alt -s gis show 技術 D:\vuejselement\workSpace\zutnlp_platform_show>cnpm install --save core-js/modules/es6.arr

elasticsearch基本操作之--使用QueryBuilders進行查詢

constant false cor ble conn 中一 listen terms int /** * 系統環境: vm12 下的centos 7.2 * 當前安裝版本: elasticsearch-2.4.0.tar.gz */ QueryBuilder 是es

vue 2 使用Bus.js進行兄弟(非父子)組件通信簡單案例

style -1 method 顯示通信 ast 技術分享實例 logs vue2中廢棄了$dispatch和$broadcast廣播和分發事件的方法。父子組件中可以用props和$emit()。如何實現非父子組件間的通信，可以通過實例一個vue實例Bus作為媒介，

node.js使用scp來進行scp操作

div log javascrip use console script 使用 path clas 示例： var client = require(‘scp2‘); client.scp({ host: ‘175.84.24.92‘, username:

怎樣操作vue.js使用3DES加密

con space lpad lsp dex cipher containe utf8 ons 如何在VUE-CLI手腳架建立的工程中使用3des加密： 1 npm install crypto-js --save-dev 1 impo

Vue.js 根據資料，進行Table單元格合併

表格程式碼 <table cellspacing="0" cellpadding="0" border="0" style="height: auto; width: 100%"> <thead> <tr> <th>

Vue.js如何獲得兄弟元素，子元素，父元素（DOM操作）

<button @click = “clickfun($event)”>點選</button> methods: { clickfun(e) { // e.target 是你當前點選的元素 // e.currentTarget 是你繫結事件的元素 } }, #獲得點選元素的

如何對第一個Vue.js元件進行單元測試（上）

　　首先，為什麼要單元測試元件？　　單元測試是持續整合的關鍵。通過專注於小的、獨立的實體，確保單元測試始終按預期執行，使程式碼更加可靠，你可以放心地迭代你的專案而不必擔壞事兒。　　單元測試不僅限於指令碼。可以獨立測試的任何東西都是可單元測試的，只要你遵循一些好的做法。這些例項包括單一責任、可預測性和鬆

如何對第一個Vue.js元件進行單元測試（下）

我們的首次測試讓我們來寫首個測試。我們首先需要使用shallowMount手動掛載我們的元件，並將其儲存在我們將執行斷言的變數中。我們還可以通過propsData屬性傳遞道具作為物件。已安裝的元件是一個物件，它有一些實用方法：然後，我們可以寫第一個斷言：讓我們來

Vue.js進行查詢操作

相關推薦