解析vue.js中常用v-指令
Vue中 v-text on if for model bind show 的解釋 v-text
v-text:元素的InnerText屬性,必須是雙標(biāo)簽 跟{{ }}效果是一樣的 使用較少
注意: v-text 只能用在雙標(biāo)簽中
v-html:
元素的innerHTML
v-html 其實(shí)就是給元素的innerHTML賦值
v-on
其實(shí)v-on后面跟的不止是click事件也可以是其他的事件，用法均相似。比如：v-on:click/mouseout/mouseover/mousedown…
以下click為例
注意：所有的v-on都可以簡(jiǎn)寫(xiě)為@，比如說(shuō)v-click可以簡(jiǎn)寫(xiě)為@click
可以用 v-on 指令監(jiān)聽(tīng) DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript 代碼。通常來(lái)講就是監(jiān)聽(tīng)dom觸發(fā)一些操作，這些操作（比如點(diǎn)擊）觸發(fā)后執(zhí)行的動(dòng)作（js）可有直接寫(xiě)在后面
v-on:click="item+=1"
v-if
v-if : 判斷是否插入這個(gè)元素,相當(dāng)于對(duì)元素的銷(xiāo)毀和創(chuàng)建
v-for
v-for 使用方式 v-fo="(item,index) in data" index 索引 item索引數(shù)據(jù)
1.迭代普通數(shù)組
在data中定義普通數(shù)組
data:{
list:[1,2,3,4,5,6]
}
<p v-for="(item,i) in list">--索引值--{{i}} --每一項(xiàng)--{{item}}</p>
2.迭代對(duì)象數(shù)組
在data中定義對(duì)象數(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指令在 ( 標(biāo)簽有多種類(lèi)型，如 button、select 等等)及 元素上進(jìn)行雙向數(shù)據(jù)綁定
v-model 會(huì)忽略所有表單元素的 value、checked 、 selected 特性的初始值而總是將 Vue 實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來(lái)源。你應(yīng)該通過(guò) JavaScript 在組件的 data選項(xiàng)中聲明初始值：
<!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
用于動(dòng)態(tài)更新html上元素的屬性,如id class,href,src等等
縮寫(xiě)：v-bind:href 縮寫(xiě)為 :href
<a :href="{{url}}">aa</a>
下面是關(guān)于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
隱藏元素 如果確定要隱藏, 會(huì)給元素的style加上display:none。是基于css樣式的切換
v-bind與v-model的區(qū)別
有一些情況我們需要 v-bind 和 v-model 一起使用：
<input :value="name" v-model="body">
data.name 和 data.body，到底誰(shuí)跟著誰(shuí)變呢？甚至，它們會(huì)不會(huì)產(chǎn)生沖突呢？
實(shí)際上它們的關(guān)系和上面的闡述是一樣的，v-bind產(chǎn)生的效果不含有雙向綁定，所以 :value的效果就是讓input的value屬性值等于data.name的值，而v-model 的效果是使input和data.body建立雙向綁定，因此首先 data.body 的值會(huì)給input的value屬性，其次，當(dāng)input中輸入的值發(fā)生變化的時(shí)候，data.body 還會(huì)跟著改變。
上文提到過(guò)下面兩句是等價(jià)的：
<input v-model="message"> <input v-bind:value="message" v-on:input="message = $event.target.value" />
到此這篇關(guān)于Vue中的v-指令使用小結(jié)的文章就介紹到這了,更多相關(guān)Vue中v-指令使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vuex入門(mén)學(xué)習(xí)之Getter詳解
這篇文章主要介紹了Vuex入門(mén)學(xué)習(xí)之Getter詳解,Vuex 允許我們?cè)?nbsp;store 中定義 getter(可以認(rèn)為是 store 的計(jì)算屬性),就像計(jì)算屬性一樣,getter 的返回值會(huì)根據(jù)它的依賴(lài)被緩存起來(lái),且只有當(dāng)它的依賴(lài)值發(fā)生了改變才會(huì)被重新計(jì)算,需要的朋友可以參考下2023-11-11
vue 數(shù)組和對(duì)象不能直接賦值情況和解決方法(推薦)
這篇文章主要介紹了vue 數(shù)組和對(duì)象不能直接賦值情況和解決方法,需要的朋友可以參考下2017-10-10
Vue引入并使用Element組件庫(kù)的兩種方式小結(jié)
本文主要介紹了Vue引入并使用Element組件庫(kù)的兩種方式小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
手把手教你Vue3?按需引入?Echarts的過(guò)程(收藏)
新項(xiàng)目采用?Vue3?作為前端項(xiàng)目框架,避免不了要使用?echarts,但是在使用的時(shí)候,出現(xiàn)了與?Vue2?使用不一樣的地方,所以特別記下來(lái),希望給到有需要的同學(xué)一些幫助2023-10-10
vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決
這篇文章主要介紹了vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue動(dòng)態(tài)路由刷新失效以及404頁(yè)面處理辦法
作為一個(gè)前端新手,項(xiàng)目中遇到權(quán)限處理時(shí),通常會(huì)采用動(dòng)態(tài)添加路由的方法來(lái)實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)路由刷新失效以及404頁(yè)面處理辦法的相關(guān)資料,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue3使用tinymce的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細(xì)介紹了Vue組件開(kāi)發(fā)之異步組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)動(dòng)畫(huà)的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
vue與ant-tree結(jié)合偽造懶加載并可以查詢(xún)
這篇文章主要為大家介紹了vue與ant-tree結(jié)合偽造懶加載并可以查詢(xún)實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07