vue2 基础（六）

最新推荐文章于 2024-07-23 21:14:28 发布

cvper

最新推荐文章于 2024-07-23 21:14:28 发布

阅读量127

点赞数

分类专栏： vue 文章标签： vue2 v-model v-if v-for

本文链接：https://blog.csdn.net/cvper/article/details/79999290

版权

vue 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

本篇我们了解一下 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>