Vue--学习笔记四

Vue中挂载所用的el , 可选用两种类型,

一种是css选择器 例:#app .

还可用HTMLElement 例:document.getElementById("app").

但注意,el 只会匹配对应的第一个元素。

所以不能给统一个元素绑定两个Vue实例。

另外var app = new Vue({});   可用在别的Vue实例里通过变量名app获得里面的数据。

Template:

这样可以以数组里一项为单位遍历出内容 ,用到了template模板、

var app = new Vue({
el : '#app',
data:{
books:[
{
name: "海拉努流氓",
author: "link"
},
{
name: "生化危机启示录",
author: "卡布空"
}
]
}
})
< div id= "app" >
< ul >
< template v-for= "book in books" >
< li >
{{ book.name }}
</ li >
< li >
{{ book.author }}
</ li >
</ template >
</ ul >
</ div >

单选框与复选框实例:

主要使用v-model属性 与value 。

< div id= "app" >
< input type= "radio" v-model= "radioValue" value= "HTML" >HTML
< input type= "radio" v-model= "radioValue" value= "JS" >JS
< p >
选择的是 {{ radioValue }}
</ p >
</ div >
< div id= "app2" >
< input type= "checkbox" v-model= "check" value= "HTML" >HTML
< input type= "checkbox" v-model= "check" value= "JS" >JS
< input type= "checkbox" v-model= "check" value= "Vue" >Vue
< p >
多选框内容 {{ check }}
</ p >
</ div >

var app = new Vue({
el: '#app',
data: {
radioValue: 'JS'
},
});

var app2 = new Vue({
el: '#app2',
data: {
check: [ 'HTML']
}
})


猜你喜欢

转载自blog.csdn.net/qq_39643110/article/details/80535129