【澳门葡京】vue常用命令,Vue学习之路6

规则指令

所谓条件指令是指满足有些条件时实施哪一部分代码,不满意条件时实行哪部分条件代码。vue条件指令有v-if,v-else-if,v-else四个,v-if条件渲染用来提醒成分是或不是移除大概插入,依照表达式的值的真真假假条件渲染成分。

vue官网

v-if

在字符串模板中,如 Handlebars ,大家得像这么写三个尺码块:

<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

在 Vue.js ,我们运用 v-if 指令完毕平等的功用:

<h1 v-if="ok">Yes</h1>

也得以用 v-else 添加1个 “else” 块:

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

① 、初探条件渲染

v-if示例

方法一使用v-if呈现标签,当开头化值为true时,则显得第3个标签,当起初化值为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。

在 <template> 中同盟 v-if 条件渲染一整组

因为 v-if
是多个指令,供给将它添加到三个成分上。然则一旦我们想切换八个因素呢?此时大家能够把3个<template> 成分当做包装成分,并在上头使用
v-if。最终的渲染结果不会蕴藏 <template> 成分。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

注意: 此处template出无法声称vue,可在template成分以上的功能域注脚vue
如下:

 <div class="box">
    <template v-if="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </template>
  </div>
  <script>
    var vm = new Vue({
      el: ".box",
      data: {
        ok: true
      }
    })
  </script>

vue 的基准渲染,仍然正视于指令系统,下边每一种介绍:

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

【澳门葡京】vue常用命令,Vue学习之路6。 

澳门葡京 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 的“else 块”:

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else 成分必须紧跟在 v-if 大概 v-else-if
成分的末尾——否则它将不会被辨认。

(1)v-if

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-else-if

v-else-if,顾名思义,充当 v-if 的“else-if 块”。能够链式地接纳频仍:

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

接近于 v-else,v-else-if 必须紧跟在 v-if 可能 v-else-if 成分之后。

<div id="app">
  <div v-if="c1">c1</div>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    c1: false
  }
});
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">

如上三种写法是一致的。

用 key 管理可复用的要素

Vue
会尽或然急忙地渲染成分,常常会复用已有成分而不是从头起首渲染。这么做,除了使
Vue
变得一点也不慢之外,还有一部分实用的补益。例如,假如你允许用户在不一样的报到形式之间切换:

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

  <div class="box">
    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address">
    </template>
  </div>
  <script>
    var vm = new Vue({
      el: '.box',
      data: {
        loginType: 'username'
      },
      methods: {
        toggleLoginType: function () {
          return this.loginType = this.loginType === 'username' ? 'email' : 'username'
        }
      }
    })
  </script>

那正是说在上头的代码中切换 loginType
将不会免去用户已经输入的内容。因为八个模板使用了同等的要素,<input>
不会被替换掉——仅仅是替换了它的 placeholder。

如此那般也不总是符合实际须求,所以 Vue
为你提供了一种方法来声称“这么些元素是一点一滴独立的——不要复用它们”。只需添加一个有所唯一值的
key 属性即可:

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

专注,<label> 成分仍旧会被异常的快地复用,因为它们并未添加 key 属性。

当 c1 为真值的时候,渲染出 v-if
所绑定的因素,不然不渲染出该因素。渲染结果如下:

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 还足以吸收接纳1个急需调用的艺术名称

<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-show

另3个用来依照规则显得成分的取舍是 v-show 指令。用法差不离相同:

<h1 v-show="ok">Hello!</h1>

今非昔比的是带有 v-show 的因素始终会被渲染并保存在 DOM 中。v-show
是简约地切换元素的 CSS 属性 display 。

注意: v-show 不帮助 <template> 语法,也不帮衬 v-else。

<div id="app"></div>
v-model

在表单控件或许零部件上创办双向绑定,为了有利于表单处理 。v-model
本质上可是是语法糖。它担负监听用户的输入事件以更新数据,并对有个别非凡气象举行一些特种处理。

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

以上代码能够兑现以下成效:随着用户的输入,p标签上的剧情自动更新。很像是
AngularJS中的 ng-model 指令。

v-if vs v-show

(2)v-else

基准渲染指令

<div id="app">
  <div v-if="c1">c1</div>
  <div v-else>c1 is not true</div>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    c1: false
  }
});
v-if

v-if 指令将依照表明式的值的真真假假来插入/移除
成分。注意那里是实在的根据标准来渲染或是不渲染成分,不是简约的隐藏成分。与之比较的有3个v-show指令,稍后介绍。

<p v-if="seen">现在你看到我了</p>

此处,v-if 指令将基于表明式 seen 的值的真真假假来插入/移除 <p>
成分。
因为 v-if 是八个限令,所以必须将它添加到三个成分上,若是想要通过 v-if
控制多少个 成分的渲染,可以利用 <template> 标签将
要求渲染的剧情包裹起来,例如:

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

当 c1 为真值的时候,渲染 v-if 所绑定的成分,不然渲染 v-else
所绑定的因素。那里值得注意的是,在 Handlebars 模板引擎里面,else 能够和
each 所搭配,当遍历次数为0的时候,则渲染 else 块所对应的内容;而对于
vue,官方给出的说教是,每一种 v-else 所绑定语句必须绑定在 v-if 或许v-else-if 语句的前面。一起首笔者还抱有一丝期待地去试了弹指间,结果。。。

v-else

v-else 指令和 和 v-if 一起利用,仿佛大家代码中的 if else。能够用
v-else 添加三个“else 块”

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

在上述的代码中,假如 ok 的值为真,将渲染 Yes,也许将渲染 No。
v-else 成分必须紧跟在带 v-if 恐怕 v-else-if
的要素的末尾,否则它将不会被辨认。

澳门葡京 26

v-else-if

v-else-if 指令就像是代码中的 else-if,充当 v-if 的“else-if
块”,能够延续使用

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

看似于 v-else,v-else-if 也务必紧跟在带 v-if 或许 v-else-if 的因素之后。

遍历次数为0的时候,v-else 绑定的因素没有渲染出来,而且控制台还报错了。

v-show

v-show 用于控制彰显也许隐藏成分,只是简单地切换来分的 CSS 属性
display,不过无论是如何,成分总是会被渲染。须要注意的是,v-show 不支持<template> 成分,也不援救 v-else。

<h1 v-show="ok">Hello!</h1>

个人感觉,在这一面,vue
的沙盘引擎大概有所欠缺。即使说,大家得以采纳在循环中添加条件判断达成平等的效劳,但却要求添加额外的代码。

列表渲染指令

(3)v-else-if

v-for

所谓的列表渲染,正是指循环渲染,比如将3个数组中的成分依次渲染出来,每一种成分对应二个要素,就好像代码中的循环语句块。

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

如上的代码将被渲染成以下内容

<ul id="example-1">
  <li> Foo </li>
  <li> Bar</li>
</ul>

v-for 还协理二个可选的第四个参数为眼下项的目录

<ul id="example-2">
  <li v-for="(item, index) in items">
     {{ index }} - {{ item.message }}
  </li>
</ul>

那些很有用,有时候我们必要拿到八个数组中某些成分的下标,就能够透过那种艺术。
在js中,还足以经过 for循环遍历四个 对象中的属性,v-for
指令通用能够形成。

<ul id="testt">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

也可以提供第三个的参数作为键名

<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>

还足以提供第七个参数作为目录

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

在动用 v-for 指令的时候,最棒能够给每一个成分多个key属性,用于标识那么些因素是唯一的,在改变值的时候,方便重新渲染。

<div v-for="item in items" :key="item.id">
    给元素加上唯一key属性吧
</div>

接近于 v-if,当 v-for 中的各个数据对应
三个要素块时,能够合营<template>一起行使,将成分块包裹起来

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

当 v-f 和 v-for 在同3个要素上应用时,v-for 的事先级比 v-if
更高,那意味着 v-if 将分头重复运行于每一种 v-for 循环中。

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

在自定义组将中应用 v-for
指令,使用方式没有何样界别,但是多少都不会被活动传送到零部件里,因为零部件有和好独自的作用域。为了把迭代数据传递到零部件里,我们要用
props

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
>
</my-component>

那边运用了 v-bind 指令,将值传递到数组中。

写的可比含糊,协作代码一起才会有痛感。

<div id="app">
  <div v-if="c1">c1</div>
  <div v-else-if="c2">c2</div>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    c1: false,
    c2: true
  }
});

此处先检查 c1 是否为真值,是则渲染出 v-if绑定的要素,不然检查 c2
是或不是为真值,是则渲染出v-else-if所绑定的要素。假诺 c1 / c2
都不为真值,则都不渲染。渲染结果如下:

<div id="app">
  <div>c2</div>
</div>

简单精通,v-if、 v-else、 v-else-if 跟类 C 语言中的 if、else、else if
作用相近。

② 、条件渲染优化

除此之外提供跟类 C 语言中的 if、else、else if 相似的效果以外,vue
还为开发者提供了质量优化方案。

(1)v-show

v-show 有着和 v-if 相似而又分歧的意义,v-if 注重于决定 DOM 节点,而
v-show 是借助于决定 DOM 节点的 display 属性。

<div id="app">
  <div v-show="c4">c4</div>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    c4: false
  }
});

当 v-show
绑定的值为真值的时候,节点正常渲染;当为假值的时候,节点仍旧渲染,然而添加了
style=”display:none;”,将节点通过 CSS 的艺术隐藏。渲染结果如下:

<div id="app">
  <div style="display: none;">c4</div>
</div>

对待于 v-if,v-show
其实不管在怎么着标准下,一起先都会议及展览开节点的渲染,而后续的情形切换都以依照CSS 完结的。针对状态需求反复切换状态的节点,v-show 相对于向来修改 DOM
节点的 v-if 有更好的特性。

只是,v-show 的症结也是扎眼的,不管初步标准如何,它都将举行 DOM
节点的渲染,那对首屏加载优化不自然是个好事情。

(2)key

在利用 v-if 等一声令下的时候,vue
会尽可能地复用已经渲染的要素,而不是整个地重头渲染。例如一对绑定 v-if 与
v-else 的因素,假诺双方内部 DOM
成分相同,则也许在所绑定数据变动时,只更新绑定了的质量,别的通过用户操作如故JS 修改了的性质将被保存。

<div id="app">
  <form>
    <div class="input-group" v-if="name">
      <label for="name">name:</label>
      <input type="text" name="name" placeholder="user name" />
    </div>

    <div class="input-group" v-else>
      <label for="email">email:</label>
      <input type="text" name="email" placeholder="email" />
    </div>

    <button v-on:click.prevent="toggle">toggle</button>
  </form>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    name: true
  },
  methods: {
    toggle: function () {
      this.name = ! this.name;
    }
  }
});

那边就是如此,点击 toggle 按钮的时候,v-if 所绑定的值会切换,相应的,DOM
节点也会随之切换,不过其实,由于 vue 重用了 input
元素,切换的还要,用户填写的内容并不曾被清空。同理,label
元素在切换的工程中,其实也只是修改了 for
属性和要素内的文字,并没有灭绝原有 DOM 节点和变化新的 DOM节点。

但是 vue
做的这种优化并不总是为人人所须求的,不须求它的时候,大家为那么些成分添加1个唯一的
key 值就可以了。

<div id="app">
  <form>
    <div class="input-group" v-if="name">
      <label for="name">name:</label>
      <input type="text" name="name" placeholder="user name" key="name" />
    </div>

    <div class="input-group" v-else>
      <label for="email">email:</label>
      <input type="text" name="email" placeholder="email" key="email" />
    </div>

    <button v-on:click.prevent="toggle">toggle</button>
  </form>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    name: true
  },
  methods: {
    toggle: function () {
      this.name = ! this.name;
    }
  }
});

像那样,为那多少个不供给“优化”的 input 元素添加了唯一标识的 key 现在,vue
便不会再复用那多个成分。每一回切换之后,修改的内容将不会被封存。

③ 、越多思考

(1)基于标签的一声令下(v-bind 、v-if)

Handlebars 的 helpers 有友好单身的语法,比如:

{{#if ok}}
 <h1>Yes</h1>
{{/if}}

它定义了一组本人的语法。而实现平等的遵循,vue 使用类似于 v-bind、v-if
之类的下令,它们都是绑定在四个个标签上边包车型大巴,如

<h1 v-if="ok">Yes</h1>

如此的语法特别从简、清晰。

Handlebars 的语法,补助同时绑定三个 DOM 节点。

{{#if ok}}
 <h1>Yes</h1>
 <h1>Yes</h1>
 <h1>Yes</h1>
{{/if}}

澳门葡京,规行矩步前面包车型地铁笔触,难道 vue 要完成成那样?

<h1 v-if="ok">Yes</h1>
<h1 v-if="ok">Yes</h1>
<h1 v-if="ok">Yes</h1>

那根本不可能,添加额外的 DOM 节点包裹住它们?那就更不容许。vue
扩充了3个 template 节点,使用的时候,我们得以像 HTML
节点一样去选取它,不过渲染页面包车型大巴时候,它不会被渲染在页面上。于是,前边的代码能够兑现成这样:

<template v-if="ok">
 <h1>Yes</h1>
 <h1>Yes</h1>
 <h1>Yes</h1>
</template>

考虑,其实和 Handlebars 也大抵了,甚至显得还要复杂些了,终究 template
这么些单词这么长~

(2)利用标准渲染字符串

眼下说,v-if
等一声令下都以根据标签的,这即便本人不想创建额外的价签,只是想规行矩步基准去修改3个字符串呢?没错,你猜对了,template
节点,它里面除了可以存放节点,也得以直接存放字符串,就好像那样:

<div id="app">
  <template v-if="c3">text</template>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    c3: true
  }
});

渲染结果:

<div id="app">text</div>

那边实在也正是行使了 template 节点不会被渲染在页面上的性状。

(3)属性的“条件渲染”

既然 HTML 节点可以规范渲染,多少个 HTML 节点能够标准化渲染,HTML
节点内字符串能够规范渲染,那么 HTML 属性呢?在编制模板的时候,HTML
属性其实也是字符串,大家能想上边那样,利用 template 模板创制字符串作为
HTML 的属性吗?

复制代码 代码如下:

<div title=”<template v-if=’c3′>title
content</template>”>此处应该 title</div>

是还是不是一看就感觉到蹊跷?vue 也这么认为,于是控制台里就解析成了:

复制代码 代码如下:

<div title=”<template v-if=’c3′>title
content</template>”>此处应该 title</div>

中级的 <template v-if=’c3′>title content</template>
整个的被识别成了字符串,那假如去掉外面包车型地铁双引号呢?

复制代码 代码如下:

<div title=<template v-if=’c3′>title
content</template>>此处应该 title</div>

好像看起来更奇怪了。最后的渲染结果:

<div title="<template">title content>此处应有 title</div>

vue
的沙盘解析不是简约的借助于字符串的分析,所以实际上那里不能够运用那种方式。正确的姿态是运用
v-bind 指令:

<div v-bind:title="c3 ? 'title content' : '' ">title</div>

因为 v-bind 指令的意料值实际上尚可 js
表达式的,这里我们传入了二个规范表明式。当 c3 为真值的时候,渲染为
title=”title content”,当 c3 为假值的时候,渲染为 title=””。

你只怕感兴趣的文章:

  • Vue.js学习课程之列表渲染详解
  • Vue.js仿Metronic高级表格(二)数据渲染
  • 用v-html化解Vue.js渲染中html标签不被分析的题材
  • 学学vue.js条件渲染
  • Vue.JS入门教程之列表渲染
  • Vue.js完毕多规格筛选、搜索、排序及分页的报表成效
  • vue.js注脚式渲染和规格与巡回基础知识

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website