国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > VUE-模板語法

VUE-模板語法

時(shí)間：2023-06-07 02:09:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-06-07 02:09:02 來源：網(wǎng)站運(yùn)營

VUE-模板語法：

Mustache（響應(yīng)式）

<div id="app"> <h2>{{message}}</h2> <h2>{{firstname + ' ' + lastname}}</h2> <h2>{{counter *2}}</h2></div><script src="../vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> const app = new Vue({ el: '#app', data: { message: '123', firstname: 'james', lastname: 'jack', counter: '100' } })</script>

插值操作

1、v-once

  1. 該指令后不需要跟任何表達(dá)式
  2. 該指令表示元素和組件只渲染一次，不會隨數(shù)據(jù)的改變而改變
<div id="app"> <h2>{{message}}</h2> <h2 v-once>{{message}}</h2></div><script src="../vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> const app = new Vue({ el: '#app', data: { message: '123' } })</script>2、v-html

  1. 如果我們直接通過{{}}來輸出，會將HTML代碼也一起輸出。
  2. 但是我們可能希望的是按照HTML格式進(jìn)行解析，并且顯示對應(yīng)的內(nèi)容。
  1. 該指令后面往往會跟上一個(gè)string類型
  2. 會將string的html解析出來并且進(jìn)行渲染
<div id="app"> <h2 v-html="url"></h2></div><script src="../vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> const app = new Vue({ el: '#app', data: { url: '<a href="https://www.baidu.com">百度一下</a>' } })</script>3、v-text

<div id="app"> <h2>{{message}}</h2> <h2 v-text="message"></h2></div><script src="../vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> const app = new Vue({ el: '#app', data: { message: '123' } })</script>4、v-pre

v-pre用于跳過這個(gè)元素和它子元素的編譯過程，用于顯示原本的Mustache語法。

<div id="app"> <h2>{{message}}</h2> <h2 v-pre>{{message}}</h2></div><script src="../vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> const app = new Vue({ el: '#app', data: { message: '123' } })</script>

動(dòng)態(tài)綁定屬性

1、v-bind

v-bind用于綁定一個(gè)或多個(gè)屬性值，或者向另一個(gè)組件傳遞props值(比如圖片的鏈接src、網(wǎng)站的鏈接href、動(dòng)態(tài)綁定一些類、樣式等等）

  1. 作用︰動(dòng)態(tài)綁定屬性
  2. 縮寫：:
  3. 預(yù)期:any (with argument) | Object (without argument)
  4. 參數(shù):attrOrProp (optional)
<div id="app"> <img v-bind:src="imgURL" > <a v-bind:href="aHref">vue官網(wǎng)</a></div><script src="../vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> const app = new Vue({ el: '#app', data: { imgURL: 'https://cn.vuejs.org/images/logo.svg', aHref: 'https://cn.vuejs.org/' } })</script>v-bind語法糖（簡寫）：

<div id="app"> <img :src="imgURL" > <a :href="aHref">vue官網(wǎng)</a></div>2、v-bind動(dòng)態(tài)綁定class（對象語法）：后面跟的是一個(gè)對象

<div id="app"> <h2 :class="{active:isActive,none:isnone}">{{message}}</h2> <button v-on:click="btnclick" type="button">按鈕</button></div><script src="../vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> const app = new Vue({ el: '#app', data: { message: '123', isActive: true, isnone: true }, methods:{ btnclick:function(){ this.isActive = !this.isActive } } })</script>單擊按鈕后：

用法一:直接通過{}綁定一個(gè)類<h2 :class="{'active ' : isActive} ">Hello world</h2>用法二:也可以通過判斷，傳入多個(gè)值<h2 :class=" { 'active': isActive，'line': isLine} ">Hello world</h2>用法三:和普通的類同時(shí)存在，并不沖突注:如果isActive和isLine都為true，那么會有title/active/line三個(gè)類<h2 class="title" ;class="{ 'active': isActive，'line ': isLine}" >Hello world</h2>用法四:如果過于復(fù)雜，可以放在一個(gè)miethods或者computed中注: classes是一個(gè)計(jì)算屬性<h2 class="title" :class="classes ">Hello world</h2>3、v-bind動(dòng)態(tài)綁定class（數(shù)組語法）

<div id="app"> <h2 class="title" :class="['active','none']">{{message}}</h2> <h2 class="title" :class="[active,none]">{{message}}</h2> <h2 class="title" :class="getClasses()">{{message}}</h2></div><script src="../vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> const app = new Vue({ el: '#app', data: { message: '123', active: 'aaaaa', none: 'bbbbb' }, methods: { getClasses:function() { return [this.active,this.none] } } })</script>4、v-bind動(dòng)態(tài)綁定style(對象語法)

<div id="app"> <h2 :style="{fontSize: finalSize + 'px',color: finalColor}">{{message}}</h2> <h2 :style="getStyle()">{{message}}</h2></div><script src="../vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> const app = new Vue({ el: '#app', data: { message: '123', finalSzie: 20, finalColor: 'red' }, methods:{ getStyle: function() { return {fontSize: this.finalSzie + 'px', color: this.finalColor} } } })</script>5、v-bind動(dòng)態(tài)綁定style(對象語法)

<div id="app"> <h2 :style="[Style,Style1]">{{message}}</h2></div><script src="../vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> const app = new Vue({ el: '#app', data: { message: '123', Style: {color: 'red'}, Style1: {fontSize: '50px'} } })</script>

關(guān)鍵詞：語法,模板

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉