Class绑定

知识点

v-bind:class

v-bind:class

为html标记绑定样式单class属性。

<div id="myApp"><div v-bind:class="{active:isActive}">红色文本1</div><div :class="{active:isActive}">红色文本2</div><button @click="btnClick">改变class吧</button>
</div>
<script>var myApp = new Vue({el: '#myApp',data: {isActive: true,},methods: {btnClick: function(){this.isActive = false;},},});
</script>

Class对象绑定

知识点

v-bind:class

v-bind:class

为html标记绑定样式单class对象。

<div id="myApp"><div :class="myClass">红色文本</div><button @click="btnClick">改变class吧</button>
</div>
<script>var myApp = new Vue({el: '#myApp',data: {myClass: {active: true,big: true,},},methods: {btnClick: function(){this.myClass.big = false;},},});
</script>

条件渲染

知识点

v-if
v-else-if
v-else

v-if

判断vue.js的变量的值，然后执行页面渲染逻辑。（if-elseif-else）

<div id="myApp"><h1 v-if="result == 0">成绩未公布</h1><h1 v-else-if="result < 60">{{result}}分 - 考试不及格</h1><h1 v-else-if="result < 80">{{result}}分 - 还需努力</h1><h1 v-else>{{result}}分 - 考得不错，玩游戏吧！</h1><button @click="btnClick">考试成绩</button>
</div>
<script>var myApp = new Vue({el: '#myApp', data: {result: 0},methods: {btnClick: function(){this.result = Math.round(Math.random() * 100);},},});
</script>

元素显示

知识点

v-show

v-show

标记是否显示html元素。(注意：v-show设置的标记在html DOM中不会消失)

<div id="myApp"><h1 v-show="result">任天堂新一代主机Switch</h1><button @click="btnClick">考试成绩</button>
</div>
<script>var myApp = new Vue({el: '#myApp', data: {result: true},methods: {btnClick: function(){this.result = !this.result;},},});
</script>

列表渲染

知识点

v-for

v-for

循环数组元素，整理内容显示到页面上。

<div id="myApp"><ul><li v-for="(game, index) in games">({{index}}) {{game.title}} / 售价：{{game.price}}元</li></ul>
</div>
<script>var myApp = new Vue({el: '#myApp', data: {games: [{title:"勇者斗恶龙",price:500},{title:"库跑卡丁车",price:400},{title:"马里奥世界",price:550},]},});
</script>

源文件

Class绑定、Class对象绑定、v-if(条件渲染)、v-show(元素显示)、v-for（列表渲染）相关推荐

Vue学习2 - 事件处理以及绑定、事件、遍历、判断、元素显示、DOM属性的绑定、comput计算属性值
文章目录 1. 事件处理.以及Vue生命周期函数.事件描述符 1.1 基本用法 1.2 获取事件对象,阻止默认行为.事件冒泡行为.事件描述符 2. for循环 2.1 基本数据类型数组的遍历 2.2 ...
Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)
Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定) Vue 的介绍 Vue 是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已 ...
C++对象绑定到Lua
http://blog.csdn.net/qq7183316/article/details/6705087 游戏中的使用脚本语言已经成为了一个标准应用.脚本语言能够在游戏开发中扮演一个重要的角色,并 ...
React（二）：jsx事件绑定、条件渲染、列表渲染、jsx的本质、购物车案例
React(二) 一.jsx事件绑定 1.this的绑定方式 2.jsx中绑定this的三种方式 3.事件对象和传参 (1)事件对象怎么传 (2)其他参数怎么传? 二.条件渲染 1.直接if-else ...
vue条件渲染、列表渲染、样式绑定
vue 官网 ---- https://cn.vuejs.org/v2/guide/class-and-style.html 样式绑定 class绑定 1.对象语法 <div class=&qu ...
angular条件渲染、列表渲染、属性绑定、样式绑定、事件绑定
文章目录属性绑定样式绑定绑定单一样式绑定多个样式用 NgStyle 设置内联样式类绑定绑定单个类样式绑定到多个 CSS 类用 NgClass 添加和删除类条件渲染列表渲染 *ng ...
前端之Vue：模板语法、指令、Style 和 Class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制
目录一. 模板语法插值语法二. 指令 2.1 文本指令 v-html:让HTML渲染成页面 v-text:标签内容显示js变量对应的值 v-show:显示/隐藏内容 v-if:显示/删除内容 2 ...
Python笔记_64_Vue_M-V-VM思想_显示数据_常用指令_操作属性_绑定事件_操作样式_条件渲染指令_列表渲染指令
文章目录 Vue vue.js的M-V-VM思想快速使用显示数据常用指令操作属性绑定事件操作样式条件渲染指令列表渲染指令 Vue vue.js是目前前端web开发最流行的工具库,由尤雨 ...
自定义变量配置文件_跟我一起学.NetCore之自定义配置源热更新对象绑定
前言上一篇针对不同的配置源进行举例演示,感受到不同配置源和不同数据格式使用统一操作的便捷(即没有什么加一层解决不了的,这个不是我说的),这里接着说说自定义配置源.配置热更新.配置绑定对象相关操作: ...

Class绑定、Class对象绑定、v-if(条件渲染)、v-show(元素显示)、v-for（列表渲染）

Class绑定

知识点

v-bind:class

Class对象绑定

知识点

v-bind:class

条件渲染

知识点

v-if

元素显示

知识点

v-show

列表渲染

知识点

v-for

源文件

Class绑定、Class对象绑定、v-if(条件渲染)、v-show(元素显示)、v-for（列表渲染）相关推荐

最新文章

热门文章