永久天堂/亚洲天堂,东京热无码不卡

1.v-if，v-else

v-if:是vue 的一個(gè)內(nèi)部指令，指令用在我們的html中。v-if用來(lái)判斷是否加載html的DOM，比如我們模擬一個(gè)用戶登錄狀態(tài)，在用戶登錄后現(xiàn)實(shí)用戶名稱。
示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if  v-else  v-show</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-if  v-else  v-show</h1>
    <hr>
    <div id="app">
        <div v-if="isLogin">登錄成功</div>
        <div v-else>對(duì)不起你還沒有登陸</div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
               isLogin:true
            }
        })
    </script>
</body>
</html>

因?yàn)樵赿ata對(duì)象中設(shè)置了isLogin:true，所以運(yùn)行這個(gè)頁(yè)面后會(huì)顯示登陸成功，同樣的如果改成isLogin:false，那么就會(huì)顯示對(duì)不起你還沒有登陸。

2.v-show

調(diào)整css中display屬性，DOM已經(jīng)加載，只是CSS控制沒有顯示出來(lái)。例如：

<div v-show="isLogin">你好：JSPang</div>

注意v-if 和v-show的區(qū)別：

v-if：判斷是否加載，可以減輕服務(wù)器的壓力，在需要時(shí)加載。DOM不一定會(huì)加載。
v-show：調(diào)整css dispaly屬性，可以使客戶端操作更加流暢。DOM已經(jīng)加載，只是被隱藏了。

3.v-for

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-for</h1>
    <hr>
    <div id="app">
        <ul>
            <li v-for="item in items">{{item}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for="(student,index) in students">{{index}}:技術(shù)胖在{{student.age}}歲階段的昵稱是{{student.name}}</li>
        </ul>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                items:[
                    //"庫(kù)里","湯普森","格林","伊戈達(dá)拉","杜蘭特"
                    53,23,76,14,54,36,28
                ],
                students:[
                    {name:"Jspang",age:33,sex:"man"},
                    {name:"Panda",age:28,sex:"man"},
                    {name:"Panpan",age:33,sex:"man"},
                    {name:"King",age:13,sex:"man"},
                ]
            },
            computed:{
                items:function(){
                    return this.items.sort();
                }
            }
        })
    </script>
</body>
</html>

如果你想對(duì)數(shù)據(jù)進(jìn)行排序等操作，可以使用computed方法，它會(huì)在數(shù)據(jù)渲染到頁(yè)面上之前執(zhí)行：

computed:{
                items:function(){
                    return this.items.sort();
                }
            }

注意，Vue有一個(gè)數(shù)據(jù)保護(hù)機(jī)制，就是說(shuō)如果你想對(duì)items里面的數(shù)據(jù)進(jìn)行排序輸出，上面的代碼是錯(cuò)誤的，為了保護(hù)data中的數(shù)據(jù)，這種機(jī)制不允許我們對(duì)items直接進(jìn)行修改，需要重新定義變量并賦值，因此我們可以把items改成sortitems，當(dāng)然在上面v-for中也要修改：

 <li v-for="item in sortitems">{{item}}</li>

這樣改之后還是有一個(gè)小問題，但這不是Vue的BUG，所有javascript都有這個(gè)問題，就是上面的排序僅僅是根據(jù)第一位數(shù)字來(lái)排序的，就是說(shuō)你把76改成7，它并沒有到第一位去。因此還需要改進(jìn)，可以自己自定義排序方法：

function sortNumber(a,b){
            return a-b;
        }

computed:{
                sortitems:function(){
                    return this.items.sort(sortNumber);
                }
            }

對(duì)data中的students對(duì)象數(shù)組進(jìn)行輸出的語(yǔ)句如下，其中index就是索引，當(dāng)然沒有強(qiáng)制規(guī)定要用index。

<li v-for="(student,index) in students">{{index}}:技術(shù)胖在{{student.age}}歲階段的昵稱是{{student.name}}</li>

如果是數(shù)組對(duì)象排序：

...
<ul>
   <li v-for="(student,index) in sortStudents">{{index}}:技術(shù)胖在{{student.age}}歲階段的昵稱是{{student.name}}</li>
</ul>
...
sortStudents:function(){
      eturn sortByKey(this.students,'age');
}
...
//數(shù)組對(duì)象方法排序:
function sortByKey(array,key){
    return array.sort(function(a,b){
            var x=a[key];
            var y=b[key];
            return ((x<y)?-1:((x>y)?1:0));
     });
}
...

4.v-text,v-html

要在html中輸出data中的值，我們一般用的是{{...}},但是這種情況也是有弊端的，就是當(dāng)我們網(wǎng)速很慢或者javascript出錯(cuò)時(shí)，會(huì)暴露我們的{{xxx}}。因此v-text就可以用來(lái)解決這個(gè)問題。代碼如下：

<span>{{message}}</span>
<span v-text="message"></span>

又例如當(dāng)變量值中還含有HTML標(biāo)簽時(shí)dodo:'<h2>hello world</h2>'，用{{}}的方式輸出會(huì)把標(biāo)簽當(dāng)作字符串給輸出，這并不符合我們的要求，這個(gè)時(shí)候就需要用到v-html，代碼如下：

<span>{{dodo}}</span><br/>
//{{}}方法
<span v-html="dodo"></span>
//v-html方法

但是在實(shí)際的項(xiàng)目開發(fā)中，v-html方法的安全性不夠容易引起黑客的攻擊，除非在保證頁(yè)面安全的情況下，才能使用，盡量還是減少使用或者使用其他可以提高代碼安全性的方法。

5.v-on

v-on就是監(jiān)聽事件，可以用v-on指令監(jiān)聽DOM事件來(lái)觸發(fā)javascript代碼。
v-on實(shí)例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-on</h1>
    <hr>
    <div id="app">
        本場(chǎng)得分：{{score}}
        <p>
            <button v-on:click="faqiu">罰球加1分</button>
            <button v-on:click="zhongtou">中投加2分</button>
            <button v-on:click="sanfen">三分加3分</button>
            <button @click="jianfen">毆打裁判減1分</button><br/>
            <input type="text" v-on:keyup.enter="onEnter" v-model="addscore">
        </p>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                score:0,
                score2:1
            },
            methods:{
                faqiu:function(){
                    this.score+=1;
                },
                zhongtou:function(){
                    this.score+=2;
                },
                sanfen:function(){
                    this.score+=3;
                },
                jianfen:function(){
                    this.score-=1;
                },
                onEnter:function(){
                    this.score=this.score+parseInt(this.addscore);
                     //強(qiáng)制轉(zhuǎn)換Int類型
                }
            }
        })
    </script>
</body>
</html>

其中，綁定用到的方法寫在method里面，v-on:可以用@來(lái)代替，另外在input框中的v-on:keyup.enter="onEnter"中的enter代表著回車鍵，整句話也就是按下鍵盤回車鍵響應(yīng)，當(dāng)然enter可以用數(shù)字13來(lái)代替，下面是鍵盤的鍵值表(來(lái)源于網(wǎng)絡(luò))：

鍵盤鍵值表

6.v-model

v-model綁定數(shù)據(jù)源指令，就是把數(shù)據(jù)綁定在特定的表單元素上，可以很容易的實(shí)現(xiàn)雙向數(shù)據(jù)綁定。所謂雙向數(shù)據(jù)綁定就是，通過v-model既能獲得input框中的內(nèi)容，又能將input框中的內(nèi)容設(shè)置為v-model的值。
示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>hello world</h1>
    <hr>
    <div id="app">
        <p>原始文本信息:{{message}}</p>
        <h3>文本框</h3>
        <p>v-model:<input type="text" v-model="message"></p>
        <p>v-model.lazy:<input type="text" v-model.lazy="message"></p>
        <p>v-model.number:<input type="text" v-model.number="message"></p>
        <p>v-model.trim:<input type="text" v-model.trim="message"></p>
        <hr>
        <h3>文本域</h3>
        <textarea cols="30" rows="10" v-model="message"></textarea>
        <hr>
        <h3>多選框綁定一個(gè)值</h3>
        <input type="checkbox" id="isTrue" v-model="isTrue">
        <label for="isTrue">{{isTrue}}</label>
        <hr>
        <h3>多選框綁定數(shù)組</h3>
            <p>
                <input type="checkbox" id="Curry" value="Curry" v-model="player_names">
                <label for="Curry">Curry</label>
                <input type="checkbox" id="Thompson" value="Thompson" v-model="player_names">
                <label for="Thompson">Thompson</label>
                <input type="checkbox" id="Durant" value="Durant" v-model="player_names">
                <label for="Durant">Durant</label>
            </p>
            <p>
                {{player_names}}
            </p>
        <hr>
        <h3>單選框綁定</h3>
        <p>
            <input type="radio" id="man" value="男" v-model="sex">
            <label for="man">男</label>
            <input type="radio" id="woman" value="女" v-model="sex">
            <label for="woman">女</label>
        </p>
        <p>你的性別是{{sex}}，對(duì)嗎？</p>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                message:"Hello World",
                isTrue:true,
                player_names:[],
                sex:'男'
            }
        })
    </script>
</body>
</html>

其中v-model="message"就是數(shù)據(jù)源綁定指令，
下面介紹一下v-model的三個(gè)修飾符：

v-model.lazy="message"：加上了lazy屬性之后，在文本框改變值，原始文本信息處不會(huì)改變，只有當(dāng)我們鼠標(biāo)焦點(diǎn)離開文本框時(shí)才會(huì)發(fā)生改變。如下圖：

v-model.lazy演示
v-model.number="message"：當(dāng)先輸入數(shù)字再輸入字母時(shí)，原始文本信息框不會(huì)被雙向綁定。其它像先輸入字母再數(shù)字，先字母再數(shù)字再字母都能正常雙向綁定。如下圖：

v-model.number演示
v-model.trim="message"：去掉前后的空格，具體效果如下圖：

v-model.trim演示

另外，關(guān)于文本域，多選框綁定一個(gè)值，多選框綁定數(shù)組，單選框綁定等這些的運(yùn)行結(jié)果以及演示如下圖：

v-model其它應(yīng)用演示

7.v-bind

v-bind用來(lái)綁定標(biāo)簽上的屬性值，包括src，url，class，style等等
示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-bind</h1>
    <hr>
    <div id="app">
        <p><img v-bind:src="imgSrc"/></p>
        <p><a :href="webUrl" target="_biank">百度</a></p>
        <hr>
        <div :class="className">1.綁定Class</div>
        <div :class="{classA:isOK}">2.綁定Class中的判斷</div>
        <div :class="[classA,classB]">3.綁定Class中的數(shù)組</div>
        <div :class="isOK?classA:classB">3.綁定Class中的三元運(yùn)算符</div>
        <hr>
        <div>
            <input type="checkbox" id="isOK" v-model="isOK"/>
            <label for="isOK">isOK={{isOK}}</label>
        </div>
        <hr>
        <div :style="{color:red,fontSize:font}">5.綁定style屬性</div>
        <div :style="styleObject">5.綁定style整個(gè)對(duì)象</div>
    </div>
    <style>
        .classA {
            color:red;
        }
        .classB {
            font-size: 150%;
        }
    </style>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                imgSrc:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587446420529&di=c4de567967c1c44964c47460f3de1f5a&imgtype=0&src=http%3A%2F%2Fp2.ifengimg.com%2Fweb%2F2017_23%2Ffb591b2c273c135_w300_h300.jpg",
                webUrl:"http://www.baidu.com",
                className:"classA",
                isOK:true,
                classA:"classA",
                classB:"classB",
                red:"red",
                font:"20px",
                styleObject:{
                    color:"green",
                    fontSize:"24px"
                }
            }
        })
    </script>
</body>
</html>

最終實(shí)現(xiàn)效果如下：

v-bind演示

圖片的地址可以自己找一個(gè)短一點(diǎn)的，這里我也是隨便找的，上面的代碼中通過data中的某個(gè)值來(lái)判斷特定的地址是什么，特定的屬性是否要添加上去等等。另外還有一個(gè)注意避免踩坑????的點(diǎn)：在Vue中，class樣式的屬性名不支持-，例如font-size這樣的寫法是會(huì)報(bào)錯(cuò)的，必須寫成fontSize。

8.v-pre，v-cloak，v-once

先上代碼(部分代碼，其它的都跟helloworld.html一樣，懶得復(fù)制了不然文章太長(zhǎng)le??????)：

...
<div id="app">
        <span>{{message}}</span>
        <span v-text="message"></span>
![v-once.gif](https://upload-images.jianshu.io/upload_images/21727303-74ff5eadbca76478.gif?imageMogr2/auto-orient/strip)
        <span v-pre>{{message}}</span>
        <span v-cloak>
            渲染完成后才顯示
        </span>
        <div v-once>{{message}}</div>
        <div><input type="text" v-model="message"/></div>
        <div>{{message}}</div>
    </div>
...

頁(yè)面實(shí)現(xiàn)效果如下：

v-once演示

1.v-pre

作用：輸出標(biāo)簽中的文本內(nèi)容，不取data中的值，也就是原模原樣輸出{{message}}。

2.v-cloak

作用：渲染完成后才顯示，不過渲染速度很快這里看不出來(lái)，知道原理就行。

3.v-once

作用：只渲染一次，避免后面當(dāng)改變message時(shí)同步發(fā)生變化。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vue內(nèi)部指令

Vue內(nèi)部指令

1.v-if，v-else

2.v-show

3.v-for

4.v-text,v-html

5.v-on

6.v-model

7.v-bind

8.v-pre，v-cloak，v-once

1.v-pre

2.v-cloak

3.v-once

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Vue內(nèi)部指令

1.v-if，v-else

2.v-show

3.v-for

4.v-text,v-html

5.v-on

6.v-model

7.v-bind

8.v-pre，v-cloak，v-once

1.v-pre

2.v-cloak

3.v-once

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

1.v-if，v-else

8.v-pre，v-cloak，v-once