vue2 基础（六）

- 日理万妓 2022-05-27 12:45 216阅读 0赞

本篇我们了解一下  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 的作用和使用方法

vue2 基础（六）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 vue学习(六)项目基础(2)-Promise

相关 Vue基础整理2

相关 vue2 基础（六）

相关 vue2 基础（四）

相关 vue2 基础（三）

相关 vue2 基础（二）

相关 vue2 基础（一）

相关 Vue2基础汇总

相关 Vue2.5基础

相关 vue基础2