欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解析vue.js中常用v-指令

 更新時間:2021年12月07日 21:03:03   作者:local伏地魔  
本文以click為例給大家介紹vue.js中常用v-指令,可以用 v-on 指令監(jiān)聽 DOM 事件,并在觸發(fā)時運行一些 JavaScript代碼,本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧

Vue中 v-text on if for model bind show 的解釋 v-text

v-text:元素的InnerText屬性,必須是雙標簽 跟{{ }}效果是一樣的 使用較少
注意: v-text 只能用在雙標簽中

v-html:

元素的innerHTML
v-html 其實就是給元素的innerHTML賦值

v-on

其實v-on后面跟的不止是click事件也可以是其他的事件,用法均相似。比如:v-on:click/mouseout/mouseover/mousedown…

以下click為例

注意:所有的v-on都可以簡寫為@,比如說v-click可以簡寫為@click

可以用 v-on 指令監(jiān)聽 DOM 事件,并在觸發(fā)時運行一些 JavaScript 代碼。通常來講就是監(jiān)聽dom觸發(fā)一些操作,這些操作(比如點擊)觸發(fā)后執(zhí)行的動作(js)可有直接寫在后面

v-on:click="item+=1"

v-if

v-if : 判斷是否插入這個元素,相當于對元素的銷毀和創(chuàng)建

v-for

v-for 使用方式 v-fo="(item,index) in data" index 索引 item索引數(shù)據

1.迭代普通數(shù)組
在data中定義普通數(shù)組

data:{
      list:[1,2,3,4,5,6]
}

<p v-for="(item,i) in list">--索引值--{{i}}   --每一項--{{item}}</p>

2.迭代對象數(shù)組
在data中定義對象數(shù)組

data:{
      list:[1,2,3,4,5,6],
      listObj:[
        {id:1, name:'zs1'},
        {id:2, name:'zs2'},
        {id:3, name:'zs3'},
      ]
}
//在html中使用 v-for 指令渲染
<p v-for "(uesr,i) in listObj"> 
// id --{{user.id}}---name-->{{user.name}}

v-model

可以使用 v-model指令在 ( 標簽有多種類型,如 button、select 等等)及 元素上進行雙向數(shù)據綁定
v-model 會忽略所有表單元素的 value、checked 、 selected 特性的初始值而總是將 Vue 實例的數(shù)據作為數(shù)據來源。你應該通過 JavaScript 在組件的 data選項中聲明初始值:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <title>vue</title>
</head>
<body>
    <div id="app">
        <input v-model="message">
        <p>The input value is : {{message}}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Word!'
            }
        })
    </script>
</body>
</html>

v-bind

用于動態(tài)更新html上元素的屬性,如id class,href,src等等
縮寫:v-bind:href 縮寫為 :href

<a :href="{{url}}">aa</a>

下面是關于v-bind一些代碼演示 v-bind。

    <style>
        .active{
            border: 1px solid red;
        }
    </style>
   
 <div id="app">
      <img v-bind:src="imgSrc" alt="">  
      <br>
      <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
      <br>
      <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
 </div>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"http://www.itheima.com/images/logo.png",
                imgTitle:"伏地魔",
                isActive:false
            },
            methods: {
                toggleActive:function(){
                    this.isActive = !this.isActive;
                }
            },
        })

v-show

隱藏元素 如果確定要隱藏, 會給元素的style加上display:none。是基于css樣式的切換

v-bind與v-model的區(qū)別

有一些情況我們需要 v-bind 和 v-model 一起使用:

<input :value="name" v-model="body">

data.name 和 data.body,到底誰跟著誰變呢?甚至,它們會不會產生沖突呢?
實際上它們的關系和上面的闡述是一樣的,v-bind產生的效果不含有雙向綁定,所以 :value的效果就是讓inputvalue屬性值等于data.name的值,而v-model 的效果是使inputdata.body建立雙向綁定,因此首先 data.body 的值會給inputvalue屬性,其次,當input中輸入的值發(fā)生變化的時候,data.body 還會跟著改變。
上文提到過下面兩句是等價的:

<input v-model="message">
<input v-bind:value="message" v-on:input="message = $event.target.value" />

到此這篇關于Vue中的v-指令使用小結的文章就介紹到這了,更多相關Vue中v-指令使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • Vuex入門學習之Getter詳解

    Vuex入門學習之Getter詳解

    這篇文章主要介紹了Vuex入門學習之Getter詳解,Vuex 允許我們在 store 中定義 getter(可以認為是 store 的計算屬性),就像計算屬性一樣,getter 的返回值會根據它的依賴被緩存起來,且只有當它的依賴值發(fā)生了改變才會被重新計算,需要的朋友可以參考下
    2023-11-11
  • vue 數(shù)組和對象不能直接賦值情況和解決方法(推薦)

    vue 數(shù)組和對象不能直接賦值情況和解決方法(推薦)

    這篇文章主要介紹了vue 數(shù)組和對象不能直接賦值情況和解決方法,需要的朋友可以參考下
    2017-10-10
  • Vue引入并使用Element組件庫的兩種方式小結

    Vue引入并使用Element組件庫的兩種方式小結

    本文主要介紹了Vue引入并使用Element組件庫的兩種方式小結,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-01-01
  • 手把手教你Vue3?按需引入?Echarts的過程(收藏)

    手把手教你Vue3?按需引入?Echarts的過程(收藏)

    新項目采用?Vue3?作為前端項目框架,避免不了要使用?echarts,但是在使用的時候,出現(xiàn)了與?Vue2?使用不一樣的地方,所以特別記下來,希望給到有需要的同學一些幫助
    2023-10-10
  • vue關于重置表單數(shù)據出現(xiàn)undefined的解決

    vue關于重置表單數(shù)據出現(xiàn)undefined的解決

    這篇文章主要介紹了vue關于重置表單數(shù)據出現(xiàn)undefined的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • vue動態(tài)路由刷新失效以及404頁面處理辦法

    vue動態(tài)路由刷新失效以及404頁面處理辦法

    作為一個前端新手,項目中遇到權限處理時,通常會采用動態(tài)添加路由的方法來實現(xiàn),下面這篇文章主要給大家介紹了關于vue動態(tài)路由刷新失效以及404頁面處理辦法的相關資料,需要的朋友可以參考下
    2023-11-11
  • vue3項目中使用tinymce的方法

    vue3項目中使用tinymce的方法

    這篇文章主要介紹了vue3使用tinymce的方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-04-04
  • Vue組件開發(fā)之異步組件詳解

    Vue組件開發(fā)之異步組件詳解

    這篇文章主要為大家詳細介紹了Vue組件開發(fā)之異步組件,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-02-02
  • vue實現(xiàn)鼠標經過動畫

    vue實現(xiàn)鼠標經過動畫

    這篇文章主要為大家詳細介紹了vue實現(xiàn)鼠標經過動畫的方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-10-10
  • vue與ant-tree結合偽造懶加載并可以查詢

    vue與ant-tree結合偽造懶加載并可以查詢

    這篇文章主要為大家介紹了vue與ant-tree結合偽造懶加載并可以查詢實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-07-07

最新評論