11 計(jì)算屬性和過濾器

1.methods和computed的區(qū)別

如以下代碼：computed1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>計(jì)算</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button type="button" @click="show1()">調(diào)用methods方法點(diǎn)擊</button>
<button type="button" @click="show2()">調(diào)用computer方法點(diǎn)擊</button>
</div>
<script type="text/javascript">
/* 實(shí)例化一個(gè)Vue對(duì)象 /
var app = new Vue({
el: '#app',
data: {
name1:'methods',
name2:'computed'
},
methods:{
show1:function(){
/ console.log(this.name1); */
alert(this.name1);
}
},
computed:{
show2:function(){
alert(this.name2);
}
}
})
</script>
</body>
</html>

運(yùn)行結(jié)果：

image

2.購物車:computed.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js computed練習(xí)——計(jì)算購物車總價(jià)</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">

        header{
            background: #FF7F50;
            width: 100%;
            height: 120px;
            color: #EEEEEE;
            left: 20px;
        }
        .container{
            left: 10px;
            position: relative;
            top: -20px;
            display: flex;
            flex-direction: column;
        }
        .item{
            display: flex;
            border: 1px solid #008000;
            border-radius: 10px;
            width: 85%;
            height: 50px;
            margin-bottom: 10px;
            /* 垂直方向居中 */
            align-items: center;
            /* 水平方向居中 */
            /* justify-content: center; */
            /* 內(nèi)邊距 */
            padding-left: 10px;
            padding-right: 10px;
            background: #EEEEEE;
        }
        .item-id{
            flex: 1 1 20%;
        }
        .item-name{
            flex: 1 1 20%;
        }
        .item-price{
            flex: 1 1 20%;
        }
        .item-count{
            flex: 1 1 20%;
        }
        .goods-count{
            width: 15px;
            text-align: center;
        }
        .accounts{
            display: flex;
            position: absolute;
            background: #FF7F50;
            width: 60px;
            height: 40px;
            /* 垂直方向居中 */
            align-items: center;
            border: 1px #008000;
            border-radius: 10px;
            left: 270px;
            top: 220px;
            outline:none;
            justify-content: center;
        }
        .totle{
            position: relative;
            top: -55px;
            left: 100px;
        }
        #photo{
            position: relative;
            width: 40px;
            height: 40px;
            left: 15px; 
        }
        .settlement {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .btn {
            width: 100px;
            height: 40px;
            background-color: #FF5000;
            border-radius: 10px;
            border: none;
            outline: none;
            color: #FFF;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <header>
        <h3>購物車</h3>
        <p>共3件寶貝</p>
    </header>
    <!-- vue-app的根容器 -->
    <div id="app">
        <div class="container">
            <div class="item" v-for="goods in goodsList">
                <div class="item-id">
                    {{goods.id}}
                    <img :src="goods.photo" id="photo"/>
                </div>
                <div class="item-name">
                    {{goods.name}}
                </div>
                <div class="item-price">
                    {{goods.price}}
                </div>
                <div class="item-count">
                    <!--  :disabled="goods.count===0"減到0不能再減了-->
                    <button type="button" @click="goods.count-=1" :disabled="goods.count===0">-</button>
                    <input type="text" v-model="goods.count" class="goods-count"/>
                    <button type="button" @click="goods.count+=1">+</button>
                </div>
            </div>
            <hr >
            <!-- <h3>Total price:</h3>
            <p class="totle">￥{{totalPrice}}</p>
            <button class="accounts">結(jié)算</button> -->
            <div class="settlement">
                <h3>總價(jià)：￥{{totalPrice}}</h3>
                <button type="button" class="btn" @click="settlement()">結(jié)算</button>
            </div>
            <div class="result" v-if="show">
                你購買了{(lán){settlement}}件商品措译，需要支付總價(jià)為：{{totalPrice}}元
            </div>
        </div>
    </div>
    <script type="text/javascript">
        // 實(shí)例化一個(gè)vue對(duì)象
        var app=new Vue({
            el:'#app',
            data:{
                goodsList:[
                    {
                        id:1,
                        name:'iphone 8',
                        price:6000,
                        count:1,
                        photo:'img/xphone.jpg'
                    },
                    {
                        id:2,
                        name:'iphone X',
                        price:7000,
                        count:2,
                        photo:'img/iphone2.jpg'
                    },
                    {
                        id:3,
                        name:'iphone XS Max',
                        price:8000,
                        count:1,
                        photo:'img/iphone3.jpg'
                    }
                ],
                show:false
            },
            methods:{
            },
            computed:{
                totalPrice:function(){
                    var totalPrice = 0;
                    var len=this.goodsList.length;
                    for(var i=0;i<len;i++){
                        totalPrice +=this.goodsList[i].price*this.goodsList[i].count;
                    }
                    return totalPrice;
            },
                    settlement: function() {
                    this.show = true;
                    var totalCount = 0;
                    var len = this.goodsList.length;
                    for (var i = 0; i < len; i++) {
                        totalCount += this.goodsList[i].count;
                    }
                    return totalCount;
                }
            } 
        })
    </script>
</body>

</html>

運(yùn)行結(jié)果：

image

3.搜索按鈕進(jìn)行頁面搜索：computed.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js computed練習(xí)-搜索頁面的實(shí)現(xiàn)</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.container {
width: 90%;
margin: 0 auto;
}

        .input-box {
            width: 50%;
            height: 25px;
            margin-bottom: 10px;
        }

        .item {
            display: flex;
            height: 100px;
            border: 1px solid #eee;
            border-radius: 8px;
            margin-bottom: 8px;
        }

        .item-title {
            flex: 1 1 80%;
            color: #00FFFF;
        }

        .item-thumbnail {
            flex: 1 1 20%;
        }

        .item-thumbnail img {
            width: 100%;
            height: 100%;
        }

        a {
            text-decoration: none;
        }

        a:link {
            color: #8E8E8E;
            text-decoration: underline;
        }

        a:visited {
            color: #008000;
            text-decoration: none;
        }

        a:hover {
            color: #0000FF;
            text-decoration: none;
        }

        a:active {
            color: #FF7F50;
            text-decoration: none;
        }

        .search {
            position: relative;
            top: -41px;
            width: 60px;
            height: 32px;
            background: #7FFF00;
            left: 50%;
            margin-bottom: 10px;
            /* 垂直方向居中 */
            align-items: center;
            display: flex;
            border: 1px solid #DDDDDD;
            outline: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <input type="text" v-model="searchString" placeholder="請(qǐng)輸入" class="input-box" />

            <button class="search" @click="handleClick()">搜索</button>

            <div class="item" v-for="article in filteredArticles" v-show="show">

                <a :href="article.url" class="item-title">
                    {{article.title}}
                </a>
                <div class="item-thumbnail">
                    <img :src="article.image">
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                searchString: "",
                show: false,
                // 數(shù)據(jù)模型
                articles: [{
                        "title": "堪稱神器的3款在線工具，你一定用得上！",
                        "url": "http://www.reibang.com/p/e83e7999346b",
                        "image": "https://upload-images.jianshu.io/upload_images/11438996-56b25f32c9307b4b?imageMogr2/auto-orient/strip%7CimageView2/2/w/640/format/webp"
                    },
                    {
                        "title": "經(jīng)典面試題：從 URL 輸入到頁面展現(xiàn)到底發(fā)生什么？",
                        "url": "http://www.reibang.com/p/45ba3e0d0c7e",
                        "image": "https://upload-images.jianshu.io/upload_images/3973862-d90954249a6f6ccd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"
                    },
                    {
                        "title": "如何免翻墻使用谷歌搜索和Chrome應(yīng)用商店",
                        "url": "http://www.reibang.com/p/484f8e6c88f6",
                        "image": "https://upload-images.jianshu.io/upload_images/858154-015a4b083685a3d1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/800/format/webp"
                    },
                    {
                        "title": "四款前所未有好用的黑科技APP，絕對(duì)的良心實(shí)用映砖，趕緊告訴家人",
                        "url": "http://www.reibang.com/p/2aec84d269fe",
                        "image": "https://upload-images.jianshu.io/upload_images/16042993-168b2cb17fd7ec0c?imageMogr2/auto-orient/strip%7CimageView2/2/w/640/format/webp"
                    },
                    {
                        "title": "堅(jiān)持學(xué)英語的方法有哪些",
                        "url": "http://www.reibang.com/p/0a6a61b0933c",
                        "image": "https://upload-images.jianshu.io/upload_images/3525704-c7293758fc59e56b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/960/format/webp"
                    }
                ]
            },
            computed: {
                // 計(jì)算函數(shù)，匹配搜索
                filteredArticles: function() {
                    var articles_array = this.articles,
                        searchString = this.searchString;
                    //搜索關(guān)鍵詞為空,則返回原始數(shù)據(jù)集
                    if (!searchString) {
                        return articles_array;
                    }
                    //搜索關(guān)鍵詞去除無用空格,轉(zhuǎn)換為小寫
                    searchString = searchString.trim().toLowerCase();
                    //過濾數(shù)組中每個(gè)元素,如果
                    articles_array = articles_array.filter(function(item) {
                        if (item.title.toLowerCase().indexOf(searchString) !== -1) {
                            return item;
                        }
                    })
                    // 返回轉(zhuǎn)化后的數(shù)組
                    return articles_array;
                }
            },
            methods: {
                handleClick: function() {
                    this.show = true;
                }
            },
        })
    </script>
</body>

</html>

運(yùn)行結(jié)果：

image

搜索按鈕可以按，但是剛開始沒有主頁面服爷，這個(gè)好像是一次性的。

form表單練習(xí)：form.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js表單練習(xí)</title>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="message1" placeholder="編輯我……">
<p>輸入內(nèi)容是: {{ message1 }}</p>

<textarea v-model="message2" placeholder="多行文本輸入……"></textarea>
<p>多行文本域內(nèi)容是：{{ message2 }}</p>

<input type="checkbox" id="baidu" value="BAIDU" v-model="checkedNames">
<label for="baidu">百度</label>
<input type="checkbox" id="google" value="GOOGLE" v-model="checkedNames">
<label for="google">谷歌</label>
<input type="checkbox" id="tencent" value="TENTCENT" v-model="checkedNames">
<label for="tencent">騰訊</label>

<span>選擇的值為: {{ checkedNames }}</span>

<label>你一共選了{(lán){checkedNames.length}}個(gè)</label>

<input type="radio" id="male" value="male" v-model="picked">
<label for="male">男</label>

<input type="radio" id="female" value="female" v-model="picked">
<label for="female">女</label>

<span>選中值為: {{ picked }}</span>

<select v-model="selected" name="fruit">
<option value="">選擇一個(gè)網(wǎng)站</option>
<option value="www.baidu.com">百度</option>
<option value="www.taobao.com">淘寶</option>
<option value="www.niit.edu.cn">南工院</option>
</select>

<p> 選擇的網(wǎng)站是: {{selected}}</p>

<button type="button" @click="commit">提交</button>
<hr >
<h2>結(jié)果顯示</h2>
<div class="result">
<p>姓名：{{message1}}</p>
<p>性別：{{picked}}</p>
<h3>愛好</h3>
<ul>
<li v-for="item in checkedNames">
{{item}}
</li>
</ul>
<p>班級(jí)：{{selected}}</p>
</div>
</div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message1: 'Hello Vue',
                message2: 'Vue官方教程',
                checkedNames: [],
                picked: 'male',
                selected: ''
            },
            methods: {
                commit: function() {
                    alert(this.message1 + this.picked + this.selected);
                }
            }
        })
    </script>
</body>

</html>

運(yùn)行結(jié)果：

image
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末获诈，一起剝皮案震驚了整個(gè)濱河市仍源，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌舔涎，老刑警劉巖笼踩，帶你破解...
    沈念sama閱讀 222,807評(píng)論 6贊 518
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異亡嫌，居然都是意外死亡嚎于，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評(píng)論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門挟冠，熙熙樓的掌柜王于貴愁眉苦臉地迎上來于购，“玉大人，你說我怎么就攤上這事圃郊〖劾裕” “怎么了？”我有些...
    開封第一講書人閱讀 169,589評(píng)論 0贊 363
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵持舆，是天一觀的道長(zhǎng)色瘩。 經(jīng)常有香客問我伪窖，道長(zhǎng)，這世上最難降的妖魔是什么居兆？ 我笑而不...
    開封第一講書人閱讀 60,188評(píng)論 1贊 300
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任覆山，我火速辦了婚禮，結(jié)果婚禮上泥栖，老公的妹妹穿的比我還像新娘簇宽。我一直安慰自己，他們只是感情好吧享，可當(dāng)我...
    茶點(diǎn)故事閱讀 69,185評(píng)論 6贊 398
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布魏割。 她就那樣靜靜地躺著，像睡著了一般钢颂。 火紅的嫁衣襯著肌膚如雪钞它。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 52,785評(píng)論 1贊 314
  • 城市分裂傳說
    那天殊鞭，我揣著相機(jī)與錄音遭垛，去河邊找鬼。 笑死操灿，一個(gè)胖子當(dāng)著我的面吹牛锯仪，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播趾盐，決...
    沈念sama閱讀 41,220評(píng)論 3贊 423
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼庶喜，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來了救鲤？” 一聲冷哼從身側(cè)響起溃卡，我...
    開封第一講書人閱讀 40,167評(píng)論 0贊 277
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎蜒简，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體漩仙，經(jīng)...
    沈念sama閱讀 46,698評(píng)論 1贊 320
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡搓茬，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,767評(píng)論 3贊 343
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了队他。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片卷仑。...
    茶點(diǎn)故事閱讀 40,912評(píng)論 1贊 353
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖麸折，靈堂內(nèi)的尸體忽然破棺而出锡凝，到底是詐尸還是另有隱情，我是刑警寧澤垢啼，帶...
    沈念sama閱讀 36,572評(píng)論 5贊 351
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布窜锯，位于F島的核電站张肾，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏锚扎。R本人自食惡果不足惜吞瞪，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,254評(píng)論 3贊 336
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望驾孔。 院中可真熱鬧芍秆，春花似錦、人聲如沸翠勉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評(píng)論 0贊 25
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽对碌。三九已至荆虱，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間俭缓，已是汗流浹背克伊。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評(píng)論 1贊 274
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留华坦，地道東北人愿吹。 一個(gè)月前我還...
    沈念sama閱讀 49,359評(píng)論 3贊 379
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長(zhǎng)得像惜姐，于是被迫代替她去往敵國和親犁跪。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,922評(píng)論 2贊 361

推薦閱讀更多精彩內(nèi)容

  • 1.methods和computed的區(qū)別 如以下代碼：computed1.html <!DOCTYPE html...
    六年的承諾閱讀 591評(píng)論 0贊 4
  • 基于Vue的一些資料 內(nèi)容 UI組件 開發(fā)框架 實(shí)用庫 服務(wù)端 輔助工具 應(yīng)用實(shí)例 Demo示例 element★...
    嘗了又嘗閱讀 1,156評(píng)論 0贊 1
  • vue.js簡(jiǎn)介 Vue.js讀音 /vju?/, 類似于 viewVue.js是前端三大新框架：Angular....
    LiWei_9e4b閱讀 509評(píng)論 0贊 0
  • 最近兩天歹袁，天氣出奇地好坷衍，晴空朗朗，暖陽恣意条舔，亮亮的枫耳，暖暖的。心孟抗，也跟著敞亮了起來迁杨；人，也跟著歡喜了起來凄硼。沉郁陰冷的...
    烏鴉一只閱讀 252評(píng)論 0贊 4
  • 我老爺爺年輕的時(shí)候云游四海铅协。 我爺爺叫“長(zhǎng)月”，是個(gè)普通的老頭子摊沉。 我爺爺是個(gè)有情趣狐史，愛虛榮，會(huì)找樂，也愛偷懶的老...
    大象的印象閱讀 464評(píng)論 1贊 5