解析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 其實就是給元素的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 : 判斷是否插入這個元素,相當(dāng)于對元素的銷毀和創(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}} --每一項--{{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指令在 ( 標(biāo)簽有多種類型，如 button、select 等等)及 元素上進行雙向數(shù)據(jù)綁定
v-model 會忽略所有表單元素的 value、checked 、 selected 特性的初始值而總是將 Vue 實例的數(shù)據(jù)作為數(shù)據(jù)來源。你應(yīng)該通過 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>
下面是關(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
隱藏元素 如果確定要隱藏, 會給元素的style加上display:none。是基于css樣式的切換
v-bind與v-model的區(qū)別
有一些情況我們需要 v-bind 和 v-model 一起使用：
<input :value="name" v-model="body">
data.name 和 data.body，到底誰跟著誰變呢？甚至，它們會不會產(chǎn)生沖突呢？
實際上它們的關(guān)系和上面的闡述是一樣的，v-bind產(chǎn)生的效果不含有雙向綁定，所以 :value的效果就是讓input的value屬性值等于data.name的值，而v-model 的效果是使input和data.body建立雙向綁定，因此首先 data.body 的值會給input的value屬性，其次，當(dāng)input中輸入的值發(fā)生變化的時候，data.body 還會跟著改變。
上文提到過下面兩句是等價的：
<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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vuex入門學(xué)習(xí)之Getter詳解,Vuex 允許我們在 store 中定義 getter(可以認為是 store 的計算屬性),就像計算屬性一樣,getter 的返回值會根據(jù)它的依賴被緩存起來,且只有當(dāng)它的依賴值發(fā)生了改變才會被重新計算,需要的朋友可以參考下2023-11-11
vue 數(shù)組和對象不能直接賦值情況和解決方法(推薦)
這篇文章主要介紹了vue 數(shù)組和對象不能直接賦值情況和解決方法,需要的朋友可以參考下2017-10-10
Vue引入并使用Element組件庫的兩種方式小結(jié)
本文主要介紹了Vue引入并使用Element組件庫的兩種方式小結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
新項目采用?Vue3?作為前端項目框架,避免不了要使用?echarts,但是在使用的時候,出現(xiàn)了與?Vue2?使用不一樣的地方,所以特別記下來,希望給到有需要的同學(xué)一些幫助2023-10-10
vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決
這篇文章主要介紹了vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
作為一個前端新手,項目中遇到權(quán)限處理時,通常會采用動態(tài)添加路由的方法來實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue動態(tài)路由刷新失效以及404頁面處理辦法的相關(guān)資料,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue3使用tinymce的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細介紹了Vue組件開發(fā)之異步組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要為大家詳細介紹了vue實現(xiàn)鼠標(biāo)經(jīng)過動畫的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要為大家介紹了vue與ant-tree結(jié)合偽造懶加載并可以查詢實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07