1.條件渲染
條件渲染使用v-if 和 v-show兩種寫法
v-show:是在頁面中把元素顯示或隱藏
v-if:不滿足條件，會把元素從頁面中刪除
2.列表渲染
列表渲染使用 v-for語法
<html>
<head>
<title>vue演示</title>
<script src="https://cdn.bootcss.com/vue/2.6.9/vue.common.dev.js"></script>
</head>
<body>
<div id="app">
<div>條件渲染</div>
<div v-if="count>0">
結果1：{{count}}
</div>
<div v-else-if="count<=0&&count>-3">
結果2：{{count}}
</div>
<div v-else>
結果3：{{count}}
</div>
<div v-show="count>0">
顯示count值{{count}}
v-show是把滿足條件的原生顯示出來，其實就是display屬性,顯示或隱藏
</div>
<div>列表渲染</div>
<div v-for="item in list">
{{item}}
</div>
<div v-for="item in studentlist">
{{item.name}} {{item.age}}
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
count:2,
list:[1,2,3,4,5,6],
studentlist:[{"name":"zhangsan","age":10},{"name":"李四","age":20},{"name":"王五","age":30}]
},
methods:{
}
})
</script>
</html>
3. 樣式綁定
樣式綁定分爲style綁定和class綁定
<html>
<head>
<title>vue演示</title>
<script src="https://cdn.bootcss.com/vue/2.6.9/vue.common.dev.js"></script>
</head>
<body>
<div id="app">
<div :style="styleinfo">
style綁定
</div>
<div v-bind:class="[{ activeClass: count>0 }, errorClass,clsssone]">
class綁定多個樣式
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
count:2,
styleinfo:
{
color: 'red',
fontSize: '13px'
},
activeClass: 'active',
errorClass: 'text-danger',
},
methods:{
}
})
</script>
</html>