vue-4-Class 与 Style 绑定
v-if
<h1 v-if="ok">Yes</h1>
切换多个元素://最终的渲染结果不会包含<template>
元素
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph </p>
<p>Paragraph </p>
</template>
//v-else,v-else-if
元素必须紧跟在v-if
或者v-else-if
元素的后面——否则它将不会被识别
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>Not A/B</div>
在v-if,v-else下的元素,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
属性
v-show
<h1 v-show="ok">Hello!</h1>
v-show 不支持 <template>,元素总是会被渲染,并且只是简单地基于 CSS 进行切换
如果需要非常频繁地切换,则使用v-show
较好;如果在运行时条件不太可能改变,则使用v-if
较好。
vue-4-Class 与 Style 绑定的更多相关文章
- Vue中class与style绑定
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson07 一 用对象的方法绑定class 很简单,举个栗子: <!D ...
- vue基础——Class与Style绑定
Class与Style绑定 操作元素的class列表和内联样式是数据绑定的一个常见的需求. 因为它们都是属性,所以我们可以用v-bind来处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼 ...
- vue 的 Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因此,在将 ...
- 前端框架之Vue(4)-Class与Style绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因此,在将 ...
- vue基础---Class 与 Style 绑定
[一]绑定HTML Class (1)对象语法 ①普通绑定class <div id="area" v-bind:class="className"> ...
- vue中,class与style绑定
<template> <div> <p v-bind:class="{active:isActive,'demo':Demo}">嘿嘿</ ...
- 关于vue.js中class与style绑定的学习
练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- Vue#Class 与 Style 绑定
绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class=&q ...
- Vue.2.0.5-Class 与 Style 绑定
Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...
- vue class与style 绑定详解——小白速会
一.绑定class的几种方式 1.对象语法 直接看例子: <div id="app3"> <div :class="{'success':isSucce ...
随机推荐
- C#清除HTML样式
C#清除HTML样式 需求说明: 网站开发时我们经常用一个富文本控件让用户自己编辑新闻内容和新闻格式,然后将HTML代码一并保存到数据库中. 然后显示文章列表的时候只需要显示一个文章摘要,所以我们就计 ...
- jenkins之从0到1利用Git和Ant插件打war包并自动部署到tomcat(第二话):安装插件,配置JDK、Git、Ant
jenkins之所以这么强大,离不开丰富的插件库. 要确保jenkins上安装好Git plugin.GitHub plugin.AntPlugin插件,一般在启动jenkins时默认安装的插件中就包 ...
- thinkphp5的Auth权限认证实战
thinkphp5的Auth权限认证实战 一.总结 一句话总结:基于角色的权限管理(真正做一遍,就会发现很简单,不然一直都是半懂不懂的) 角色 权限 真正做一遍,就会发现很简单,不然一直都是半懂不懂的 ...
- java集合框架联系小图
- 算法之如何实现LRU缓冲淘汰策略
1)什么是缓存? 缓存是一种提高数据读取性能的技术,在硬件设计.软件开发中都有着非广泛的应用,比如常见的CPU缓存.数据库缓存.浏览器缓存等等. 2)为什么使用缓存?即缓存的特点缓存的大小是有限的,当 ...
- linux之bash shell
GNU bash ======================================================== 通常计算机硬件是由运算器.控制器.存储器.输入/输出设备等等这些物理 ...
- hihocoder-1415 后缀数组三·重复旋律3 两个字符串的最长公共子串
把s1,s2拼接,求Height.相邻的Height判断左右串起点是否在两个串中,另外对Height和s1.length()-SA[i-1]取min. #include <iostream> ...
- codeforces 848B Rooter's Song 思维题
http://codeforces.com/problemset/problem/848/B 给定一个二维坐标系,点从横轴或纵轴垂直于发射的坐标轴射入(0,0)-(w,h)的矩形空间.给出点发射的坐标 ...
- Jquery常用的一些事件 keyup focus
(1)keyup 事件能在用户每次松开按键时触发,实现即时提醒: (2)focus 事件能在元素得到焦点的时候触发,也可以实现即时提醒. (3)为了使表单填写准确,在表单提交之前,需要对表单的必须填写 ...
- Scrapy - CrawlSpider爬虫
crawlSpider 爬虫 思路: 从response中提取满足某个条件的url地址,发送给引擎,同时能够指定callback函数. 1. 创建项目 scrapy startproject mysp ...