怎么才能到一行。v-if用法_加了v-if 列表只显示一行-CSDN博客

本文链接：https://blog.csdn.net/weixin_40945354/article/details/120055916

本文演示了Vue.js中使用模板语法显示条件内容、数据绑定以及创建组件的过程。从简单的`v-if`指令到数据初始化，再到输入字段和按钮的添加，逐步展示了Vue应用的基本构建块。最后，通过引入`yes`和`no`属性来控制标题的显示，以及添加`name`属性完成更复杂的模板结构。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>

<body>
<div id="app">
  <h1>Yes!</h1>
  <span><h1>Age: </h1><h1 v-if="age>20">{{ age }}</h1></span>
  <h1>Yes!</h1>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
 const vm = Vue.createApp({
   data() {
     return {
        age: 28
     }
   }
 }).mount('#app')

  </script>
</body>

</html>

为啥不对

<!DOCTYPE html>

<body>
<div id="app">
  <h1>Yes!</h1>
  <h1>Age: </h1><h1 v-if="age>20">{{ age }}</h1>
  <h1>{{ name }}</h1>
  
</div>



<script src="https://unpkg.com/vue@next"></script>
<script>
 const vm = Vue.createApp({
   data() {
     return {
        age: 28
        name: Will Smith
     }
   }
 }).mount('#app')

  </script>
</body>

</html>

又加了

<!DOCTYPE html>

<body>
<div id="app">
  <h1>Yes!</h1>
  <h1>Age: </h1>
  <h1 v-if="age>20">{{ age }}</h1>
  <h1>{{ name }}</h1>
  <p>username: <input type="text"></p>
  <p>password: <input type="text"></p>
  <button>登录</button>
</div>



<script src="https://unpkg.com/vue@next"></script>
<script>
 const vm = Vue.createApp({
   data() {
     return {
        age: 28, 
        name: Will Smith
     }
   }
 }).mount('#app')

  </script>
</body>

</html>

yes又不见了

<!DOCTYPE html>

<body>
<div id="app">
  <h1 v-if="yes">Yes!</h1>
  <h1 v-if="no">No!</h1>
  <h1 v-if="age > 20">Age: {{ age }}</h1>
  <h1>{{ name }}</h1>
  <p>username: <input type="text"></p>
  <p>password: <input type="text"></p>
  <button>登录</button>
</div>



<script src="https://unpkg.com/vue@next"></script>
<script>
 const vm = Vue.createApp({
   data() {
     return {
        age: 28, 
        
     }
   }
 }).mount('#app')

  </script>
</body>

</html>

改正了，但是为什么return这里直接加name不行

<!DOCTYPE html>

<body>
<div id="app">
  <h1 v-if="yes">Yes!</h1>
  <h1 v-if="no">No!</h1>
  <h1 v-if="age > 20">Age: {{ age }}</h1>
  <h1>{{ name }}</h1>
  <p>username: <input type="text"></p>
  <p>password: <input type="text"></p>
  <button>登录</button>
</div>



<script src="https://unpkg.com/vue@next"></script>
<script>
 const vm = Vue.createApp({
   data() {
     return {
       yes: true,
       no: false,
        age: 28, 
        
     }
   }
 }).mount('#app')

  </script>
</body>

</html>

这个name是怎么改的

<!DOCTYPE html>

<body>
<div id="app">
  <h1 v-if="yes">Yes!</h1>
  <h1 v-if="no">No!</h1>
  <h1 v-if="age > 20">Age: {{ age }}</h1>
  <h1>Name: {{ name }}</h1>
  <p>username: <input type="text" usename="name"></p>
  <p>password: <input type="text"></p>
  <button>登录</button>
</div>



<script src="https://unpkg.com/vue@next"></script>
<script>
 const vm = Vue.createApp({
   data() {
     return {
       yes: true,
       no: false,
       age: 28, 
       name: Will Smith,
     }
   }
 }).mount('#app')

  </script>
</body>

</html>