6. vue常用指令 v-if 条件渲染元素

v-if 条件渲染

v-if=“true” 渲染元素

v-if=“hidden” 不渲染元素

v-if 可以从 vue 模型中取数据

v-if 也可以直接赋值一个表达式

v-else-if 必须紧跟 v-if

v-else必须紧跟 v-if或者 v-else-if ,它们中间不能插入其他任何指令


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue的基本使用title>
  
  <script src="js/vue.js">script>
  
  
head>
<body>
  <div id="app">
    <ul>
      <li>名字: {{name}}li>
      <li>年龄: {{age}}li>
      <li v-if="age<10">{{name}}是小学生li>
      <li v-else-if="age<18">{{name}}是未成年人li>
      <li v-else>{{name}}是成年人li>
    ul>
  div>
  
  <script>
    //步骤2 创建vue实例对象
    let vue = new Vue({
      //步骤3 指定vue对象控制的HTML区域
      el: "#app",
      //步骤4 指定vue对象控制的HTML区域的数据
      data: {
        name: "lchh",
        age: 16,
      },
    });
  script>

body>
html>

你可能感兴趣的:(Vue,vue)