溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Vue條件循環判斷+計算屬性+綁定樣式v-bind的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
Vue.js條件與循環
1、條件判斷
（1）v-if，
<div id="app">
<p v-if="seen">現在你看到我了</p>
<template v-if="ok">
<h2>菜鳥教程</h2>
</template>
</div>
<script>
new Vue({
el:'#app',
data:{
seen:true,
ok:true
}
});
</script>（2）v-else-if
（3）v-else
<div id="app">
<div v-if="type === 'A' ">A</div>
<div v-else-if="type === 'B' ">B</div>
<div v-else="type === 'C' ">C</div>
</div>
<script>
new Vue({
el:'#app';
data:{
type:'C'
}
});
</script>（4）v-show
除了v-if、v-else-if、v-else，還可以使用v-show指令來根據條件展示元素
<div id="app">
<h2 v-show="ok">Hello</h2>
</div>
<script>
new Vue({
el:'#app',
data:{
ok:true
}
});
</script>2、循環語句
使用v-for指令
（1）簡單的v-for
<ol>
<li v-for="site in sites">{{ site.name }}</li>
</ol>（2）模板中的v-for
<template v-for="site in sites">
<li> {{ site.name }} </li>
<li> ----- </li>
</template>綜合小案例，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.min.js" ></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
<!--利用模板化template進行循環-->
<ul>
<template v-for="site in sites">
<li>{{ site.name }}</li>
<li>-------</li>
</template>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
sites:[
{name:'Zhao'},
{name:'Xiao'},
{name:'yan'}
]
}
});
</script>
</body>
</html>（3）v-for迭代對象
a.一個參數
原理：<li v-for="value in object"> {{ value }}
b.兩個參數
原理：<li v-for="(value,key) in object" > {{ key }} : {{ value }}
（4）v-for迭代整數
<div id="app">
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app'
})
</script>3、計算屬性computed
計算屬性主要適用于一些復雜的邏輯關系，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>計算屬性</title>
<script type="text/javascript" src="js/vue.min.js" ></script>
</head>
<body>
<div id="app">
<p>原始字符串：{{message}}</p>
<p>計算后反轉字符串：{{reversedMessage}}</p>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
message:'Runoob'
},
computed:{
//計算屬性reversedMessage的getter
reversedMessage:function(){
//this指向vm實例
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>由于computed用于計算屬性，而reversedMessge相對于computed的屬性的獲得，其this指向的是vm的實例，當message發生改變的時候，對應的reversedMessage也會發生相對應改變。
擴展：computed VS methods
由于computed與methods實現效果相同，所以也可以使用methods來替代computes，
區別如下：
a、computed基于它的依賴緩存，只有相關依賴發生改變時，才會重新取值；
b、methods而言，在重新渲染的時候，函數總會重新調用執行。
可以說computed性能會更好，但若不希望緩存，可以使用methods屬性
4、樣式綁定
在vue中由于class與style是HTML元素的屬性，用于設置元素的樣式，可以用v-bind來設置樣式屬性
實例1：
<div v-bind:class="{active:isActive}"></div>等價于
<div class="active">
（1）vue.js.style（內聯樣式）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.min.js" ></script>
</head>
<body>
<div id="app">
<div v-bind:>菜鳥教程</div>
</div>
<script>
new Vue({
el:'#app',
data:{
activeColor:'green',
fontSize:30
}
})
</script>
</body>
</html>（2）使用數組將多個樣式對象應用到一個元素上
<div v-bind:>菜鳥教程</div>
<script>
new Vue({
el:'#app',
data:{
baseStyles:{
color:'green',
fontSize:'30px'
},
overridingStyles:{
'font-weight':'blod'
}
}
})
</script>感謝你能夠認真閱讀完這篇文章，希望小編分享的“Vue條件循環判斷+計算屬性+綁定樣式v-bind的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
