规则渲染,js完成标准化渲染的实例代码

By admin in 4858美高梅 on 2019年3月28日

原则指令

所谓条件指令是指满足有个别条件时实施哪部分代码,不满意条件时进行哪部分条件代码。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 添加一个 “else” 块:

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

① 、初探条件渲染

v-if示例

办法一使用v-if展现标签,当起初化值为true时,则显示第二个标签,当伊始化值为false时,则显得第3个标签:

4858美高梅 14858美高梅 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

4858美高梅 3

4858美高梅 4

在vue中,指令 (Directives) 是带有 v-
前缀的出格属性,指令属性的值预期是单个 JavaScript
表明式。指令的职务是,当表明式的值改变时,将其发生的连锁影响,响应式地作用于
DOM。本文内容是对官网文书档案的一个蕴涵计算,更详细的内容请查看官网API。

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

因为 v-if
是1个限令,供给将它添加到二个因素上。不过假诺咱们想切换八个要素呢?此时大家能够把一个<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条件标签,示例如下:

4858美高梅 54858美高梅 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

4858美高梅 7

 

4858美高梅 8

动用情势二:使用数字类型呈现标签,当评定标准开首化值为数字类型1时,则呈现if标签,当衡量圭表开首化值不为数字类型1时,则依照测量尺度显得v-else-if条件标签,示例如下:

4858美高梅 94858美高梅 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

4858美高梅 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值彰显标签:

4858美高梅 124858美高梅 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

4858美高梅 14

4858美高梅 15

采取格局二:if-else类型,用字符串显示标签,当初阶化值为字符串1时,显示if标签,当开始化值不为字符串1的时候,展现else标签,示例如下:

4858美高梅 164858美高梅 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

4858美高梅 18

行使格局三:if-else类型,用数字类型展现标签,当初阶化值为数字类型1时,突显if标签,当开始化值不为数字类型1的时候,显示else标签,示例如下:

4858美高梅 194858美高梅 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

4858美高梅 21

 使用情势四:if-elseif-else类型,当if和elseif条件都不满意时,呈现else标签,示例如下:

4858美高梅 224858美高梅 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

4858美高梅 24

 总括:复杂的先后都以由不难的判定标准构成生成而成,在先后中灵活应用衡量尺度才是最要害的。

v-html

为了输出真正的html,而不是常见的字符串文本,能够动用 v-html 指令。

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

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

以上的输出结果为

4858美高梅 25

image.png

规则渲染,js完成标准化渲染的实例代码。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可用于动态地绑定2个或两个特色,或1个组件 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
为你提供了一种方法来声称“这多少个成分是一心独立的——不要复用它们”。只需添加1个享有唯一值的
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 还足以收起3个亟待调用的法门名称

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

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

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

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

v-show

另贰个用来根据条件显得成分的选料是 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 指令将基于表达式的值的真真假假来插入/移除
成分。注意那里是实在的依据规则来渲染或是不渲染元素,不是简约的隐藏成分。与之比较的有一个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
的要素的后边,不然它将不会被辨认。

4858美高梅 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>

本条很有用,有时候大家必要获得3个数组中有些元素的下标,就足以经过那种艺术。
在js中,还能通过 for循环遍历2个 对象中的属性,v-for
指令通用能够成功。

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

也足以提供第一个的参数作为键名

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

仍是能够提供第4个参数作为目录

<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 在同贰个因素上行使时,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
节点的渲染,那对首屏加载优化不自然是个好工作。

4858美高梅,(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
增添了叁个 template 节点,使用的时候,大家得以像 HTML
节点一样去选用它,可是渲染页面包车型地铁时候,它不会被渲染在页面上。于是,后面包车型大巴代码可以实现成这么:

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

寻思,其实和 Handlebars 也大半了,甚至显得还要复杂些了,究竟 template
那些单词这么长~

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

前边说,v-if
等一声令下都是依照标签的,那假使本人不想创制额外的价签,只是想奉公守法标准化去修改三个字符串呢?没错,你猜对了,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证明式渲染和规则与巡回基础知识

发表评论

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

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有