• <tt id="4ayss"><strong id="4ayss"></strong></tt>
  • <xmp id="4ayss"><menu id="4ayss"></menu><nav id="4ayss"><strong id="4ayss"></strong></nav>
    <nav id="4ayss"><strong id="4ayss"></strong></nav>
  • <nav id="4ayss"></nav>

    卓象程序員 | 哈爾濱IT培訓 | 品質教育,口碑傳承 | 為做出口口相傳,好口碑的教育品牌而奮斗!

    卓象程序員讓每一位學員高薪就業 聯系我們13101507057

    加微信,了解詳情
    您所在的位置:首頁 > 文章 >Vue.js

    「Vue.js開發連載四」vue.js指令v-bind
    時間: 2018-11-09 10:29:31     來源: 卓象IT實訓基地【原創】

    上一篇文章講解“vue.js指令v-text”,本篇文章講解“vue.js指令v-bind”。


    v-bind可以把你在data中定義的數據和元素屬性進行關聯。

    1. v-bind

    「Vue.js開發連載四」vue.js指令v-bind


    【例】設置p標簽的align屬性居中。

    「Vue.js開發連載四」vue.js指令v-bind


    瀏覽器訪問:

    「Vue.js開發連載四」vue.js指令v-bind



    2. v-bind簡寫

    「Vue.js開發連載四」vue.js指令v-bind


    “v-bind”可簡寫為“:”,比如上面的例子:

    「Vue.js開發連載四」vue.js指令v-bind



    3. 綁定表達式

    v-bind可以綁定js表達式。

    「Vue.js開發連載四」vue.js指令v-bind


    【例】當data中變量position值為1時,p標簽居中,position值為其他時,p標簽居左。

    「Vue.js開發連載四」vue.js指令v-bind


    瀏覽器訪問:

    「Vue.js開發連載四」vue.js指令v-bind


    當將data下的變量position設為1時,p標簽將會居中顯示。


    4. 綁定class

    這里對于class和style的綁定比較特殊,所以單獨拿出來講解。

    1)對象——v-bind:class="{}"

    「Vue.js開發連載四」vue.js指令v-bind


    對象的鍵為class名,值為Boolean,為true對應的class才生效。

    【例】為p標簽添加三個class值,fontRed、font-bgcolor、font-big分別用樣式設置p標簽的顏色、背景色、字體大小,并用變量isShow設置class值是否生效。

    「Vue.js開發連載四」vue.js指令v-bind


    注意

    1. 對象中鍵帶有連接符(-)時,需要用引號。

    瀏覽器預覽:

    「Vue.js開發連載四」vue.js指令v-bind


    2)數組——v-bind:class="[ ]"

    「Vue.js開發連載四」vue.js指令v-bind


    ①數組的值為class名

    「Vue.js開發連載四」vue.js指令v-bind


    瀏覽器訪問:

    「Vue.js開發連載四」vue.js指令v-bind


    ②數組中將對象作為一個值

    「Vue.js開發連載四」vue.js指令v-bind


    瀏覽器訪問:

    「Vue.js開發連載四」vue.js指令v-bind



    5. 綁定style —— v-bind:style="{}"

    綁定style對象語法十分直觀,看著非常像CSS,但其實是一個JavaScript對象。CSS屬性名可以用駝峰式(camelCase)或短橫線分隔(kebab-case,記得用單引號括起來)來命名。

    【例】設置p標簽的顏色為紅色,字體大小為20px。

    「Vue.js開發連載四」vue.js指令v-bind


    瀏覽器訪問:

    「Vue.js開發連載四」vue.js指令v-bind


    注意

    1. 當v-bind:style使用需要添加瀏覽器引擎前綴的CSS屬性時,如transform,Vue.js會自動偵測并添加相應的前綴。


    測驗:

    1. 如何用:style和:class分別做一個背景顏色為#ccc,高度/寬度為100px的div,并設置div的 contenteditable="true",實現一個可輸入內容的div。

    測驗(有很多種做法,以下僅作為參考):

    「Vue.js開發連載四」vue.js指令v-bind


    瀏覽器訪問:

    「Vue.js開發連載四」vue.js指令v-bind


    Vue.js連載為卓象程序員原創,轉載請聯系卓象程序員

    「Vue.js開發連載四」vue.js指令v-bind


    關注卓象程序員,定期發布技術文章

    下一篇講解“vue.js指令v-if+v-else+v-else-if”

    「Vue.js開發連載四」vue.js指令v-bind
    热99re久久精品|天天综合网久久综合免费人成|91久久久久久久精品青草| 亚洲AV无码无一区二区Ⅰ久久|
  • <tt id="4ayss"><strong id="4ayss"></strong></tt>
  • <xmp id="4ayss"><menu id="4ayss"></menu><nav id="4ayss"><strong id="4ayss"></strong></nav>
    <nav id="4ayss"><strong id="4ayss"></strong></nav>
  • <nav id="4ayss"></nav>