亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue常用的幾個指令附完整案例

發布時間:2020-08-31 14:47:00 來源:腳本之家 閱讀:167 作者:Real_man 欄目:web開發

越來越多的人在用Vue,剛開始接觸vue的話常接觸的指令就幾個,統一歸納一下,做個demo演示。

指令

v-text
v-html
v-bind
v-on
v-model
v-for

代碼

學習技術最好還是要看下代碼是什么樣的。

v-text

解釋:更新DOM對象的 textContent

<h2 v-text="msg"></h2>

v-html

解釋:更新DOM對象的 innerHTML

<h2 v-html="msg"></h2>

v-bind

作用:當表達式的值改變時,將其產生的連帶影響,響應式地作用于 DOM

語法:

v-bind:title="msg"
// 簡寫::title="msg"
<!-- 完整語法 -->
<a v-bind:href="url" rel="external nofollow" rel="external nofollow" ></a>
<!-- 縮寫 -->
<a :href="url" rel="external nofollow" rel="external nofollow" ></a>

v-on

作用:綁定事件

語法:v-on:click="say" or v-on:click="say('參數', $event)"

簡寫:@click="say"

說明:綁定的事件定義在methods

<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>

v-model

作用:在表單元素上創建雙向數據綁定

說明:監聽用戶的輸入事件以更新數據

案例:計算器

<input type="text" v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

v-for

作用:基于源數據多次渲染元素或模板塊

<div v-for="item in items">
 {{ item.text }}
</div>

<!-- item 為當前項,index 為索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>

<!-- item 為值,key 為鍵,index 為索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>

完整案例

<template>

 <div>
  <p v-text="msgData"></p>
  <p>{{ msgData }}</p>

  <p v-text="msgHtml"></p>
  <p v-html="msgHtml"></p>

  <input v-model="msgModel" type="text"/>
  <p>v-model數據:<span v-text="msgModel"></span></p>

  <button v-on:click="alert">按鈕</button>

  <p v-for="(item, index) in list" :key="index">{{item}} -- {{index}}</p>
 </div>
</template>

<script>
 export default {
  data () {
   return {
    message: 'Vue的生命周期',
    msgData: '消息數據',
    msgHtml: '<span >消息HTML</span>',
    msgModel: '',
    list: [
     'apple', 'banana', 'fruit'
    ]
   }
  },
  methods: {
   alert () {
    this.$notify({
     title: '請求異常',
     message: '通知'
    })
   }
  },
 mounted: function () {
   console.log('------mounted 掛載結束狀態------')
  },
}
</script>

Note:代碼是在腳手架的項目中寫的。

效果如下:

Vue常用的幾個指令附完整案例

結束

介紹幾個基本的指令用法,更多指令參考官方文檔

參考

Vue官方參考

總結

以上所述是小編給大家介紹的Vue常用的幾個指令附完整案例,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

崇左市| 汉阴县| 鄂尔多斯市| 巴里| 楚雄市| 阿拉善盟| 陆川县| 惠水县| 桐梓县| 蕉岭县| 平遥县| 泽普县| 呼伦贝尔市| 苏尼特右旗| 梓潼县| 北票市| 宜川县| 手游| 贵溪市| 富源县| 大丰市| 德州市| 隆回县| 沙坪坝区| 育儿| 分宜县| 神农架林区| 达州市| 田阳县| 广东省| 林口县| 阿克苏市| 买车| 临颍县| 休宁县| 淳化县| 米脂县| 普陀区| 惠来县| 威宁| 靖安县|