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']
}
})