解析vue.js中常用v-指令
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
的效果就是讓input
的value
屬性值等于data.name
的值,而v-model
的效果是使input
和data.body
建立雙向綁定,因此首先 data.body
的值會給input
的value
屬性,其次,當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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue 數(shù)組和對象不能直接賦值情況和解決方法(推薦)
這篇文章主要介紹了vue 數(shù)組和對象不能直接賦值情況和解決方法,需要的朋友可以參考下2017-10-10vue關于重置表單數(shù)據出現(xiàn)undefined的解決
這篇文章主要介紹了vue關于重置表單數(shù)據出現(xiàn)undefined的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09