标签：bsp test png col 页面 循环 value str 截图
一、简单案例
1、引入Vue.js:
<script type="text/javascript" src="js/vue.js"></script>
2、在js中定义数据：
var vm=new Vue({ el:‘#test‘, data:{ str:‘Hello Vue!!!‘ } })
3、在页面展示数据：
<div id="test"> <span>{{ str }}</span> </div>
4、运行截图：
二、条件语句
vue中条件语句的用法，类似于java中的if-else-else_if的用法，加上v-即可。
1、代码示例：
（1）js代码：
var vm=new Vue({ el:‘#test‘, data:{ str:‘Vue‘ } })
（2）页面代码：
<div id="test"> <span v-if="str===‘Bootstrap‘">Bootstrap</span> <span v-else-if="str==‘Vue‘">Vue</span> <span v-else>Null</span> </div>
2、结果截图：
三、循环语句
1、数组元素循环：
（1）js代码：
var vm=new Vue({ el:‘#test‘, data:{ students:[ {name:‘张三‘}, {name:‘李四‘}, {name:‘王五‘}, {name:‘赵六‘} ] } })
（2）页面代码：
<div id="test"> <ul> <li v-for="student in students"> {{ student.name }} </li> </ul> </div>
（3）结果截图：
2、对象属性循环：
（1）一个参数：
js代码：
var vm=new Vue({ el:‘#test‘, data:{ student:{ name:‘张三‘, age:‘18‘, sex:‘男‘ } } })
页面代码：
<div id="test"> <ul> <li v-for="value in student"> {{ value }} </li> </ul> </div>
结果截图：
（2）两个参数：
js代码与单个参数时相同，页面代码如下：
<div id="test"> <ul> <li v-for="(value,key) in student"> {{ key }}:{{ value }} </li> </ul> </div>
结果截图：
（3）三个参数：
js代码与单个参数时相同，页面代码如下：
<div id="test"> <ul> <li v-for="(value,key,index) in student"> {{ index }}--{{ key }}:{{ value }} </li> </ul> </div>
结果截图：
标签：bsp test png col 页面 循环 value str 截图
原文地址：https://www.cnblogs.com/guobin-/p/13532280.html
