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>
