本篇我们了解一下 v-model , v-if , v-for 这三个指令;
当你了解这个指令怎么用的,是干嘛的,就可以了,更多,更具体的信息可以去vue的官网去看文档;
这里只是用更为直观的方式让你了解一下vue;
---------------------------------------------------------------------------------------------------------------
第一个:v-model
这个指令可以实现表单元素的双向绑定,可以在浏览器中查看相应的效果;
<!DOCTYPE html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8">
<
title>vue2基础</
title>
<
script
src=
"vue.js"></
script>
</
head>
<
body>
<
div
id=
"main">
<
input
type=
"text"
v-model=
"message"
placeholder=
"enter info">
<
span>{{message}}</
span>
</
div>
<
script>
let abc
={
message:
"我们来学习模板吧"
}
new
Vue({
el:
"#main",
data:abc
});
</
script>
</
body>
</
html>
第二个:v-if
这个指令可以实现判断;
<!DOCTYPE html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8">
<
title>vue2基础</
title>
<
script
src=
"vue.js"></
script>
</
head>
<
body>
<
div
id=
"main">
<
span
v-if=
"showme">{{message}}</
span>
</
div>
<
script>
let abc
={
message:
"我们来学习模板吧",
showme:
false
}
new
Vue({
el:
"#main",
data:abc
});
</
script>
</
body>
</
html>
从上面的效果可以看出,如果 showme=false, 那么模板中的元素是不会显示的,如果我们改变 showme=true,
那么就可以正常显示了;通过布尔值来实现条件渲染的作用;
最后我们来看一下这个 v-for ,很明显,这是一个循环作用的指令;
下面我们简单的循环出一个对象,更多具体的信息自行查看官网文档
<!DOCTYPE html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8">
<
title>vue2基础</
title>
<
script
src=
"vue.js"></
script>
</
head>
<
body>
<
div
id=
"main">
<
li
v-for=
"value in message">{{value}}</
li>
</
div>
<
script>
let abc
={
message:{
name:
"坚持",
age:
"25",
do:
"looking for"
}
}
new
Vue({
el:
"#main",
data:abc
});
</
script>
</
body>
</
html>
总结:(1)v-model 的作用和使用方法
(2)v-if 的作用和使用方法
(3)v-for 的作用和使用方法