-
- AppMan 2023-12-01
条件渲染，定时触发或其它满足的条件触发等。
列表渲染
Classs与Style绑定
v-if ，v-else，v-else-if 示例：
v-show 条件满足才显示
v-for简单基础使用，对上数组输出
v-for与条件渲染一起过滤使用
v-for与v-show一起过滤使用
- 0赞 · 0采集
-
- 秋光乄5656 2022-02-23
<div v-for="items in list" v-bind:style='styleMsg'{{items.name}}</div>
>- 0赞 · 0采集
-
- 喜欢你没道理丷 2021-08-02
语法
v-for
v-if
v-else
v-show
- 0赞 · 0采集
-
- Ixinyi 2021-06-11
1、条件渲染 v-if、v-else、v-else-if，用于判断条件，其用法类似java条件判断用法
2、v-show 其值为boolean类型，值为true时显示，值为false时隐藏
3、v-for 列表渲染 v-for="变量 in 列表"
4、条件渲染与列表渲染组合
5、v-bind绑定style
- 0赞 · 0采集
-
- IT太白管理 2021-03-10
F12开发者工具-console窗口。通过var vm = new VUE({....}) vm.属性名来调试属性值或者参数值。
绑定class:
混合模式：
:class="{'msg','color',{'big':item.big>0}}"
简单模式：
:class="{'color':true}" 或者 :class="{'msg','color'}"
绑定style:
:style="styleMsg"
- 0赞 · 0采集
-
- 毛利春 2021-01-11
条件选择常用指令
v-if
v-else, v-else-if
v-show
-
截图0赞 · 0采集
-
- 雨过的晴天 2020-10-23
条件渲染:
v-if
v-else,v-else-if
v-show
- 0赞 · 0采集
-
- 宝慕林1025446 2020-08-07
v-for 循环渲染
-
截图0赞 · 0采集
-
- 宝慕林1025446 2020-08-07
v-if 条件渲染
v-if
v-else
-
截图0赞 · 0采集
-
- 英仙辰星 2020-08-04
列表渲染： v-for
- 0赞 · 0采集
-
- 英仙辰星 2020-08-04
v-bind：绑定属性 v-on：绑定事件 条件渲染： 1.v-if： <div v-if="count > 0"> count大于0，count的值是：{{count}} </div> <div v-else> count的值是：{{count}} </div>-
截图0赞 · 0采集
-
- weixin_慕姐52966 2020-05-14
v-if
v-else-if
v-else
如果第一个条件满足，后面即使有满足的条件也不会执行
- 0赞 · 0采集
-
- 慕UI026837 2020-04-25
class绑定语法判断
-
截图0赞 · 0采集
-
- 慕UI026837 2020-04-25
class绑定
-
截图0赞 · 0采集
-
- 慕哥6392411 2020-04-24
条件渲染：v-if，v-else，v-else-if，v-show
列表渲染：v-for
vue对象中单横线的变量赋值时要打单引号或者用驼峰表示法，比如：text-shadow：‘0 0 5px green'应该表示为'text-shadow':.....或者textShadow:........
- 0赞 · 0采集
-
- 歪头儿在帝都 2020-04-23
#style绑定一个对象 const vue = new Vue({ el:"#app", data:{ styleObject:{ red:"red", fontSize:"12px" } } }) <div v-bind:style="styleObject"></div>- 0赞 · 0采集
-
- 歪头儿在帝都 2020-04-23
条件渲染v-if 列表渲染v-for 属性绑定v-bind 事件绑定v-on Class绑定v-bind:class Style绑定v-bind:style
- 0赞 · 0采集
-
- LightXun 2020-04-08
<author>Light Xun</author>
<summary>引用请转明出处</summary>
<title>Vue - 2.5 条件渲染, 列表渲染, Class与Style绑定</title>
<content>
1. 条件渲染
1.1 v-if : 后接 js 表达式, 不显示时删除元素
1.2 v-else, v-else-if
1.3 v-show : 后接 js 表达式, 不显示时隐藏元素
2. 列表渲染
2.1 v-for
2.2 v-for 与 v-if 结合使用
2.3 v-for 高阶用法
3. Class与Style绑定 : 使用 v-bind: 来与 data 中变量进行绑定
</content>
- 0赞 · 0采集
-
- 荡来荡去 2020-02-20
一、条件渲染
1、v-if，v-else ， v-else-if
2、v-show
二、列表渲染
1、v-for ： v-for="item in list"
三、Class和Style绑定
1、v-bind:style="" -->简写 :style
-
截图1赞 · 0采集
-
- qq_慕雪7562243 2020-02-10
:class="['active','more',{'another': item.age<30}]"
当item.age小于30时，有class名another
:style="styleMsg"
在vue的data中
styleMsg: {
color: 'red',
textShadow: '0 0 5px green'
}
注意，像text-shadow这种带-的css属性名，应用以下写法
'text-shadow': '',
'textShadow':'' (驼峰法)
- 0赞 · 0采集
-
- 慕九州Pluto 2019-12-15
单横线写法在Vue中用驼峰法表示
- 0赞 · 0采集
-
- bahit507 2019-12-14
条件渲染：
-
截图0赞 · 0采集
-
- bahit507 2019-12-14
条件渲染
列表渲染
-
截图0赞 · 0采集
-
- qq_流目青酒 2019-11-26
条件渲染
如下，当“v-if”与“v-else-if”有同区间，则运行“v-if”
<div v-if="n < 0"></div> <div v-else-if="n < 0 && n > -5"></div> <div v-else></div>
- 0赞 · 1采集
-
- weixin_慕姐714768 2019-11-16
模板语法:
v-bind:块元素绑定属性---缩写：：
v-on:组件事件指令---缩写：@
v-if:条件渲染，改变DOM树
v-show:改变css样式隐藏显示，初始渲染DOM
v-for:列表渲染
methods:函数属性对象
插值语法{{msg}}
watch:侦听Vue实例上的1个数据变动
computed:侦听Vue实例上的多个数据变动
- 0赞 · 1采集
-
- 和樱 2019-10-20
条件渲染：v-if、v-else、v-else-if、v-show（是用在html里的）
列表渲染：v-for、v-for与v-if结合使用、v-for的高阶使用
Class与Style绑定：属性绑定用v-bind。v-bind:class="..." 或 v-bind:。效果：自动在html里添加对应的类和css属性
1源码：
<!DOCTYPE html> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style> /* .bg{ color:red; } */ </style> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> </head> <body> <div id="app"> <div v-if="count >= 0"> 情况一：count大于等于0，count的值是：{{count}} </div> <div v-else-if="count >= -5"> 情况二：count大于等于-5且小于0，count的值是：{{count}} </div> <div v-else> 情况三：count小于-5，count的值是：{{count}} </div> <div v-show="count == -5">满足show的条件，显示show:{{count}}</div> </div> <script> var arr = 'new test'; var app = new Vue({ el:'#app', data: { msg:'hello vue', count:0 } }) </script> </body> </html>2源码：
list为数组：
<body> <div id="app"> <div v-for="item in list">{{item}}</div><!--注意这个for...in与js的不太一样。如果是js的话，会输出索引值--> </div> <script> var arr = 'new test'; var app = new Vue({ el:'#app', data: { msg:'hello vue', list:[5,6,7,8,9] } }) </script>list为数组对象：
<body> <div id="app"> <div v-for="item in list">输出item：{{item}}</div> <div v-for="item in list">输出名字item.name：{{item.name}}</div> </div> <script> var arr = 'new test'; var app = new Vue({ el:'#app', data: { msg:'hello vue', list:[ { name: '张三', age:20 }, { name:'李四', age:25 }, { name:'老五', age:33 } ] } }) </script>输出结果：
v-for与v-show一起使用：
<div id="app"> <div v-for="item in list"> 姓名：{{item.name}}，年龄：{{item.age}} </div> <div v-for="item in list"> <div v-show="item.age > 24"> 年龄大于24的人有：{{item.name}} </div> </div> </div>
3.属性绑定
<div id="app"> <div v-for="item in list"> 姓名：{{item.name}}，年龄：{{item.age}} </div> <div v-for="item in list"> <div v-show="item.age > 24" : :class="['banana','more',{'another':item.age < 26}]"><!--:class="{'apple':true}"--> 年龄大于24的人有：{{item.name}} </div> </div> </div>首先:class有两种写法 ①:class="{'类名':(true or false)}" ② :class="['类名','类名',{'类名':(true or false or判断语句)}]"
绑定的class和style都会加在每个div中，除了another类，因为该类只有年龄小于26才加。style中每个div都会有color和text-shadow属性，但是年龄小于24的张三会多一个“display:none”，所以他的名字没有显示出来。
如果将张三的年龄修改一下，就会显示出来了
- 0赞 · 1采集
-
- 慕田峪4293831 2019-10-14
【常用指令】
v-on：绑定事件；v-bind：绑定属性；
v-if，v-else，v-else-if配合js判断表达式实现条件选择；各条件分支之间若不互斥则按序执行最前一个分支；
v-show：若满足条件则展现；
v-for：为列表、数组、对象数组等容器中每个元素循环执行相同语句；
【style与class绑定】
v-bind绑定style：在html标签中使用v-bind:style="style对象名"将其属性绑定至Vue实例中的style对象，再于Vue实例的style对象中以对象形式定义style内容：style对象名: { color: 'red', textShadow: '0 0 5px #232323'}
v-bind绑定class：在html标签中使用v-bind:class="['active', 'add', {'another':true(or判断语句)}]"实现对其class属性的绑定；应用举例：可在循环中根据每个循环对象的某属性值判断是否对其绑定对应class
- 0赞 · 0采集
-
- 慕后端6964843 2019-09-19
v-bind: 是绑定属性的命令，可以取data中定义的值，不需要使用双括号进行引用
- 0赞 · 0采集
-
- 大鹏111 2019-09-14
条件渲染、列表渲染、Class与Style绑定
【一】条件渲染：根据条件进行渲染，比如中秋节页面呈现中秋节样式，过了中秋节就没有这种样式了。
条件渲染常用指令：
v-if（还有v-else v-else-if v-show等）：标签里属性前写，后面的值是Javascript表达式用来做一些判断，如果满足，则该标签起作用。
后续会讲解v-if和v-show的使用场景及区别。
v-show：它的功能和v-if相似，如果v-show不成立，相当于给标签添加上了display:none。
【二】列表渲染：类似于Java中for循环。比如：一个星空页面会有很多很多<html>标签，如果手写很麻烦，这里就可以通过列表渲染实现这样情景。
列表渲染常用指令：
v-for：可以遍历vue实例中数组的每一项。
可以渲染对象数组
v-for与v-if结合使用：
v-for高阶应用：
【三】Class与Style绑定
Style的绑定：举例使用v-bind:绑定标签的style样式，它与原来不适用v-bind是有区别的，原来是，使用v-bind后，v-bind:，也可以不使用行内式（可以写在vue实例的data里）。还可以添加一些其它的样式，但是如果Key中有-，就需要要两边添加''，其中key也可以是驼峰式命名方法，这样就不用给key添加''了。
Class的绑定：给class绑定值，拥有多种写法。
也可以使用判断
- 0赞 · 1采集
-
- 长安未央 2019-08-26
常用指令： 列表渲染
-
截图0赞 · 0采集
