Vue学习之路6-条件渲染金沙官网线上

条件指令

所谓条件指令是指满足某个条件时执行哪部分代码,不满足条件时执行哪部分条件代码。vue条件指令有v-if,v-else-if,v-else三个,v-if条件渲染用来指示元素是否移除或者插入,根据表达式的值的真假条件渲染元素。

vue官网

金沙官网线上,v-if示例

方式一使用v-if显示标签,当初始化值为true时,则显示第一个标签,当初始化值为false时,则显示第二个标签:

金沙官网线上 1金沙官网线上 2

 1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1">
 5       ishow为true我将首次展现
 6       ishow为false我将首次展现
 7     </div>
 8   </div>
 9 </template>
10 
11 <script>
12   export default {
13         name: 'v-if',
14       data () {
15           return {
16             title: '条件渲染',
17             isshow: true
18           }
19       }
20     }
21 </script>
22 
23 <style scoped>
24   .title1 {
25     text-align: left;
26   }
27   .div1{
28     float: left;
29   }
30 </style>

View Code

金沙官网线上 3

金沙官网线上 4

在vue中,指令 (Directives) 是带有 v- 前缀的特殊属性,指令属性的值预期是单个 JavaScript 表达式。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。本文内容是对官网文档的一个概括总结,更详细的内容请查看官网API。

v-else-if

使用条件:v-else-if 必须紧跟在带 v-if 或者 v-else-if 的元素之后,当项目中有多个判断条件时使用。

使用方式一:使用字符串显示标签,当判断条件初始化值为字符串1时,则显示if标签,当判断条件初始化值不为字符串1时,则根据判断条件显示v-else-if条件标签,示例如下:

金沙官网线上 5金沙官网线上 6

 1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1">
 5       ishow为字符串类型1我将首次展现
 6       (elseif)否则ishow为字符串类型2我将首次展现
 7       (elseif)否则ishow为字符串类型3我将首次展现
 8     </div>
 9   </div>
10 </template>
11 
12 <script>
13   export default {
14     name: 'v-if',
15     data () {
16       return {
17         title: '条件渲染',
18         isshow: '2'
19       }
20     }
21   }
22 </script>
23 
24 <style scoped>
25   .title1 {
26     text-align: left;
27   }
28   .div1{
29     float: left;
30   }
31 </style>

View Code

金沙官网线上 7

 

金沙官网线上 8

使用方式二:使用数字类型显示标签,当判断条件初始化值为数字类型1时,则显示if标签,当判断条件初始化值不为数字类型1时,则根据判断条件显示v-else-if条件标签,示例如下:

金沙官网线上 9金沙官网线上 10

 1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1">
 5       ishow为数字类型1我将首次展现
 6       (elseif)否则ishow为数字类型2我将首次展现
 7       (elseif)否则ishow为数字类型3我将首次展现
 8     </div>
 9   </div>
10 </template>
11 
12 <script>
13   export default {
14     name: 'v-if',
15     data () {
16       return {
17         title: '条件渲染',
18         isshow: 3
19       }
20     }
21   }
22 </script>
23 
24 <style scoped>
25   .title1 {
26     text-align: left;
27   }
28   .div1{
29     float: left;
30   }
31 </style>

View Code

金沙官网线上 11

 

常用指令

v-else示例

使用条件:v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。

使用方式一:if-else类型,使用初始化bool值显示标签:

金沙官网线上 12金沙官网线上 13

 1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1">
 5       ishow为true我将首次展现
 6       ishow为false我将首次展现
 7     </div>
 8   </div>
 9 </template>
10 
11 <script>
12   export default {
13         name: 'v-if',
14       data () {
15           return {
16             title: '条件渲染',
17             isshow: false
18           }
19       }
20     }
21 </script>
22 
23 <style scoped>
24   .title1 {
25     text-align: left;
26   }
27   .div1{
28     float: left;
29   }
30 </style>

View Code

金沙官网线上 14

金沙官网线上 15

使用方式二:if-else类型,用字符串显示标签,当初始化值为字符串1时,显示if标签,当初始化值不为字符串1的时候,显示else标签,示例如下:

金沙官网线上 16金沙官网线上 17

 1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1">
 5       ishow为字符串1我将首次展现
 6       ishow不为字符串1我将首次展现
 7     </div>
 8   </div>
 9 </template>
10 
11 <script>
12   export default {
13     name: 'v-if',
14     data () {
15       return {
16         title: '条件渲染',
17         isshow: '1'
18       }
19     }
20   }
21 </script>
22 
23 <style scoped>
24   .title1 {
25     text-align: left;
26   }
27   .div1{
28     float: left;
29   }
30 </style>

View Code

金沙官网线上 18

使用方式三:if-else类型,用数字类型显示标签,当初始化值为数字类型1时,显示if标签,当初始化值不为数字类型1的时候,显示else标签,示例如下:

金沙官网线上 19金沙官网线上 20

 1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1">
 5       ishow为数字类型1我将首次展现
 6       ishow不为数字类型1我将首次展现
 7     </div>
 8   </div>
 9 </template>
10 
11 <script>
12   export default {
13     name: 'v-if',
14     data () {
15       return {
16         title: '条件渲染',
17         isshow: '1'
18       }
19     }
20   }
21 </script>
22 
23 <style scoped>
24   .title1 {
25     text-align: left;
26   }
27   .div1{
28     float: left;
29   }
30 </style>

View Code

金沙官网线上 21

 使用方式四:if-elseif-else类型,当if和elseif条件都不满足时,显示else标签,示例如下:

金沙官网线上 22金沙官网线上 23

 1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1">
 5       ishow为数字类型1我将首次展现
 6       (elseif)否则ishow为数字类型2我将首次展现
 7       if-elseif条件都不满足,我将首次展现
 8     </div>
 9   </div>
10 </template>
11 
12 <script>
13   export default {
14     name: 'v-if',
15     data () {
16       return {
17         title: '条件渲染',
18         isshow: 3
19       }
20     }
21   }
22 </script>
23 
24 <style scoped>
25   .title1 {
26     text-align: left;
27   }
28   .div1{
29     float: left;
30   }
31 </style>

View Code

金沙官网线上 24

 总结:复杂的程序都是由简单的判断条件组合变化而成,在程序中灵活使用判断条件才是最重要的。

v-html

为了输出真正的html,而不是普通的字符串文本,可以使用 v-html 指令。

//假设 rawHtml  = ‘This should be red’

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: </p>

以上的输出结果为

金沙官网线上 25

image.png

v-bind

v-bind可用于动态地绑定一个或多个特性,或一个组件 prop 到表达式,常见用法如下:

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 内联字符串拼接 -->
<img :src="'/path/to' + fileName">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

因为 v-bind 指令太常用,所以为它设计了一个缩写

<img v-bind:src="imageSrc">

<img :src="imageSrc">

以上两种写法是一样的。

v-on

v-on 指令用于 监听 DOM 事件,并在触发时运行一些 JavaScript 代码。

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

在点击 按钮的时候, 会执行 counter += 1这段代码。
然而许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

以上代码中,每次点击 按钮的时候,将执行 greet 方法。
同样的,因为 v-on 指令太常用,所以为它设计了一个缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>
v-model

在表单控件或者组件上创建双向绑定,为了方便表单处理 。v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

以上代码可以实现以下效果:随着用户的输入,p标签上的内容自动更新。很像是 AngularJS中的 ng-model 指令。

本文由金沙官网线上发布于Web前端,转载请注明出处:Vue学习之路6-条件渲染金沙官网线上

您可能还会对下面的文章感兴趣: