Vue.js框架：基本用法（一）
更新时间：2020-08-25 19:47:36 来源： 阅读量：
【摘要】 Vue.js框架：基本用法（一）考必过小编为大家整理了关于Vue.js框架：基本用法（一）的信息，希望可以帮助到大家！
Vue.js框架：基本用法（一）
标签：bsptestpngcol页面循环valuestr截图
一、简单案例
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、在页面展示数据：
<p id="test">
<span>{{ str }}</span>
</p>
4、运行截图：
二、条件语句
vue中条件语句的用法，类似于java中的if-else-else_if的用法，加上v-即可。
1、代码示例：
（1）js代码：
var vm=new Vue({
el:‘#test‘,
data:{
str:‘Vue‘
}
})
（2）页面代码：
<p id="test">
<span v-if="str===‘Bootstrap‘">Bootstrap</span>
<span v-else-if="str==‘Vue‘">Vue</span>
<span v-else>Npl</span>
</p>
2、结果截图：
三、循环语句
1、数组元素循环：
（1）js代码：
var vm=new Vue({
el:‘#test‘,
data:{
students:[
{name:‘张三‘},
{name:‘李四‘},
{name:‘王五‘},
{name:‘赵六‘}
]
}
})
（2）页面代码：
<p id="test">
<p>
<p v-for="student in students">
{{ student.name }}
</p>
</p>
</p>
（3）结果截图：
2、对象属性循环：
（1）一个参数：
js代码：
var vm=new Vue({
el:‘#test‘,
data:{
student:{
name:‘张三‘,
age:‘18‘,
sex:‘男‘
}
}
})
页面代码：
<p id="test">
<p>
<p v-for="value in student">
{{ value }}
</p>
</p>
</p>
结果截图：
（2）两个参数：
js代码与单个参数时相同，页面代码如下：
<p id="test">
<p>
<p v-for="(value,key) in student">
{{ key }}:{{ value }}
</p>
</p>
</p>
结果截图：
（3）三个参数：
js代码与单个参数时相同，页面代码如下：
<p id="test">
<p>
<p v-for="(value,key,index) in student">
{{ index }}--{{ key }}:{{ value }}
</p>
</p>
</p>
结果截图：
Vue.js框架：基本用法（一）
标签：bsptestpngcol页面循环valuestr截图
以上就是Vue.js框架：基本用法（一）的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！