真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

vue常用指令是什么

這篇文章將為大家詳細(xì)講解有關(guān)vue常用指令是什么，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

站在用戶的角度思考問題，與客戶深入溝通，找到登封網(wǎng)站設(shè)計(jì)與登封網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、主機(jī)域名、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋登封地區(qū)。

vue常用指令有：v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等。

vue.js官方給自己的定為是數(shù)據(jù)模板引擎，并給出了一套渲染數(shù)據(jù)的指令。

Vue.js的指令是以v-開頭的，它們作用于HTML元素，指令提供了一些特殊的特性，將指令綁定在元素上時(shí)，指令會(huì)為綁定的目標(biāo)元素添加一些特殊的行為，我們可以將指令看作特殊的HTML特性（attribute）。

指令的作用是當(dāng)表達(dá)式的值改變時(shí)，相應(yīng)地將某些行為應(yīng)用到 DOM 上。

vue常用指令總結(jié)

1.v-once

能執(zhí)行一次性地插值，當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會(huì)更新。但請(qǐng)留心這會(huì)影響到該節(jié)點(diǎn)上的其它數(shù)據(jù)綁定：


        原始值: {{msg}}

        
后面的: {{msg}}

        

4.v-else

必須和v-if一起用才可以 不能單獨(dú)用 而且必須在v-if下面 中間有別的標(biāo)簽也會(huì)報(bào)錯(cuò)


　　 1.7">小明的身高是: {{height}}m

　　小明的身高不足1.70m

5.v-else-if  

這個(gè)比較簡(jiǎn)單 直接看代碼就可以了 哈哈哈  輸入成績(jī)多少 就顯示相應(yīng)的等級(jí)


        
輸入的成績(jī)對(duì)應(yīng)的等級(jí)是:

        = 90">優(yōu)秀

        = 75">良好

        = 60">及格

        不及格

        
    
         

6.v-for

基于數(shù)據(jù)渲染一個(gè)列表，類似于JS中的遍歷。其數(shù)據(jù)類型可以是 Array | Object | number | string

該指令之值，必須使用特定的語法(item, index) in items,  index是索引，可以省略。item是 為當(dāng)前遍歷元素提供別名(可以自己隨便起名字) 。v-for的優(yōu)先級(jí)別高于v-if之類的其他指令


        
            
            
                {{index +':'+d}}
            

            
            
                {{index+':'+dd}}
            
            
            
                {{dd2}}
            
            
            {{gg}}

            {{gg2}}

             
        
    
    
    
        new Vue({
            el:'#app',
            data:{
                msg:[123,98,25,63],
                obj:{name:'敏敏',age:'21',height:'160'},
                num2:'1335454',  //注意這里不要寫成了num2:1335154
                string2:'xvzhiming'
            }
        })
    

vue常用指令是什么

7.v-html

雙大括號(hào)會(huì)將數(shù)據(jù)解釋為普通文本，而非 HTML 代碼。為了輸出真正的 HTML，你需要使用 v-html  而且給一個(gè)標(biāo)簽加了v-html 里面包含的標(biāo)簽都會(huì)被覆蓋。

注意v-html要慎用 因?yàn)闀?huì)出現(xiàn)安全問題  官網(wǎng)解釋為：你的站點(diǎn)上動(dòng)態(tài)渲染的任意 HTML 可能會(huì)非常危險(xiǎn)，因?yàn)樗苋菀讓?dǎo)致 XSS 攻擊。請(qǐng)只對(duì)可信內(nèi)容使用 HTML 插值，絕不要對(duì)用戶提供的內(nèi)容使用插值。


　　哈哈哈
  


　　new Vue({
        el:'#app',
        data:{
            msg:'我愛敏敏！！',
            html:'
大海森林我都不愛！
'
            }
    })
　

8.v-text

給一個(gè)便簽加了v-text 會(huì)覆蓋標(biāo)簽內(nèi)部原先的內(nèi)容  如下面的例子  哈哈哈不會(huì)顯示


    哈哈哈



    new Vue({
        　　el:'#app',
        　　data:{
        　　　　msg:'我愛敏敏'
            }
        })

9.v-bind

用法

 
... 
 ...

例


     改變src alt等屬性
        
        
    
    
    

還可以綁定類名和css樣式等


        //v-for是一個(gè)遍歷                 給他一個(gè)calss 如果index===cative class名是active，如果不等就為空
        //index 是v-for的索引
        
            {{college}}
        

        今天的天氣很好!

    
 
    
    

注意input里面 用了v-blnd 寫法不在是{{}}包著了；


         
　　　　　　　　　　　　　　//加粗的內(nèi)容剛剛學(xué)時(shí) 很容易出錯(cuò) 注意不要加{{}}；
            原始值:value=name />
             模板:value=name.split('').reverse().join() />
            methods:value=fz() />
            conputed:value=fz2 />
        
    
    
        new Vue({
            el:'#app',
            data:{
                name:'chenglianjie'
            },
            methods:{
                fz(){
                    return this.name.split('').reverse().join('');
                }
            },
　　　　　　　　　　　　　　//這是vue的計(jì)算屬性 在我的博客vue分類里面有介紹
            computed:{
                fz2(){
                    return this.name.split('').reverse().join('');
                }
            }
        })
    

10.v-on  

綁定事件的  還有些用法在后面的博客中會(huì)提到


 ... 
 
 
...

11.v-model

v-model是一個(gè)指令，限制在、