Vue1-class、style、v-bind:（简写为 :）、v-show、v-if

最新推荐文章于 2024-04-07 14:54:29 发布
最新推荐文章于 2024-04-07 14:54:29 发布
阅读量1.2k 收藏 1
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43010586/article/details/104385492
版权
本文详细探讨了Vue.js中class、style、v-bind（简写为:）、v-show和v-if的用法。class和style绑定允许动态地改变元素的样式，v-bind用于响应式地绑定数据到属性，v-show和v-if则用于根据条件显示或隐藏元素，它们之间的差异和应用场景也进行了对比分析。
摘要由CSDN通过智能技术生成 
```css
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style type="text/css">
		.active{
   color: red;}
		.cen{
   text-align: center;line-height: 200px;}
	</style>
</head>
<body>
	<!-- 
	vue+vuex+vuerouter+elementui+axios
	核心+管数据+管路有+快速建立框架+异步请求 --辅助开发
	渐进式（需要什么加什么，一层层加）
	先加vue链接：https://cn.vuejs.org/v2/guide/
	引入文件（基础学习使用）
	mvc --model(数据层) view(视图结构) controler(控制器-控制逻辑)
	vue --数据与视图分离-最小程度操作DOM(DOM过多影响性能)
	数据推动视图
	vue是一个mvvm模型(
最低0.47元/天 解锁文章
别狗了
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【vue指令---v-bind 可以简写 ：】
m0_56349322的博客
02-25 1658
v-bind绑定属性 :class :title :src <div id="app"> <img v-bind:src="imgSrc" alt=""> <br> <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" @click='toggleActive' :class="isActive?'active':''" > </div> 这里:class.
Vue03_Vue基本指令2/3——显示切换、属性绑定（v-show/v-if/v-bind）
linxwx的博客
02-11 1488
一、v-show 根据表达式的真假，切换元素的显示和隐藏； 二、v-if 根据表达式真假，切换元素的显示与隐藏（直接操纵DOM元素）； 三、v-bind 为元素绑定属性，v-bind: 属性名，简写 : 属性名
Vue.js常用指令汇总（v-if、v-for等）
周清城的博客
08-03 854
有时候指令太多会造成记错、记混的问题，所以本文在记忆的时候会采用穿插记忆的方式，交叉比对，不易出错。 本文主要讲了一下六个指令： v-if//v-show//v-else//v-for//v-bind//v-on 1. v-if 条件渲染指令，根据其后表达式的bool值进行判断是否渲染该元素； eg:  HTML: ? 1
vue v-if判断简写
想名字想老半天的博客
10-21 2549
v-if判断active满足0的时候写法是：v-if="active === 0" 那如果active同时要满足0，1，2三个值的时候，如果在v-if里用 || 并列写 如：v-if="active === 0 || active === 1 || active === 2""（这样是可行的，但代码有点冗余） //[ ]里可以放字符串，数值等 v-if="[0,1,2].includes(active) " 第二种，使用方法，复用性高，适用场景：多个标签都需要用到此判断 标签中： v-if="matchS
Vue常见简写 “:“ , “@“ , “#“
xwnxwn的专栏
04-07 1433
首先需要了解一下v-bind,v-bind指令指示Vue将元素的id属性与组件的tabalData属性保持一致.如果绑定的值为null或undefined,那么该属性将从渲染的元素上移除.通常想要响应式的绑定一个属性,都会选择v-bind.而 : 就是v-bind的简写形式,可能看起来和一般的HTML属性长得不太一样,但它的确是合法合规的属性绑定字符,并且所有支持Vue的浏览器都可正常解析它.并且,它不会出现在最终渲染的Dom中,相信在你深入了解过它后,会喜欢这种写法的.label: "日期",
v-bind
Leon_Jinhai_Sun的博客
02-03 319
v-bind html属性不能使用双大括号形式绑定，只能使用v-bind指令。 在将v-bind用于class和style时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 <div id="app"> <!--可以是数据模型，可以是具有返回值的js代码块或者函数--> <div v-bind:t...
v-if指令
小岳岳
09-14 264
1、 toggleIsShow:function(){ this.isShow = !this.isShow; } 2、 <p v-if="isShow">Vue 测试</p>
vue常用指令介绍以及简写
qq_26889291的博客
01-03 564
v-if 条件渲染语句，当条件为true时则显示 Username :class(v-bind:class) 动态切换类，当 isActive变量为真时则添加active类 :style(v-bind:style) 也是动态的切换样式 v-for 可以循环数组或者对象 {{ item.message }} @click(v-on:click) 绑定事件 … <a @click=“doSomething”>… :elementProps..
vue.js - 模板语法之缩写
02-23 7126
vue.js - 模板语法之缩写
Vue中的缩写：v-bind、v-on
weixin_34128534的博客
11-17 212
2019独角兽企业重金招聘Python工程师标准>>> ...
Vue.js学习笔记 (2)
带带大红袍的博客
09-27 305
Vue.js学习笔记（2） 学习资料：黑马程序员Vue教程(BV12J411m7MG) 文章目录Vue.js学习笔记（2）②本地应用2.显示切换，属性绑定v-showv-ifv-bindv-forv-on补充v-model③网络应用axiosaxios + vue ②本地应用 2.显示切换，属性绑定 （v-show、v-if、v-bind） v-show 根据表达式的真假，切换元素的显示和隐藏 （例如广告、遮罩层） 无论v-show后面写什么，都会解析为布尔值，从而判断是否显示。 总结： v-show指
Vue指令
HeX_7的博客
05-07 205
v-cloak v-once v-pre 自定义指令
Vue学习笔记——常见简写&修饰符
星留影的刹那间
06-08 374
最近在看vue-element-admin框架的源码，发现其中还是有不少的语法糖。感觉对初次接触Vue的开发者还是会造成些困惑，虽然之前我有使用过React，但是对比起来Vue还是有不少从未见过的语法糖或简写,为了以便时而查阅，这里就将自己觉得比较重要的内容罗列在此。 常见简写 v-bind属性绑定: <div v-bind:class="actived"></div> //等效于 <div :class="actived"></div> v-on事件绑定@
Vue 使用v-bind:style 绑定样式
weixin_34032792的博客
04-10 127
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js...
V-bind缩写、V-on缩写、V-if、V-show、V-for、Computed计算属性、methods属性、监听属性watch实例
上班就犯困
01-23 445
声明了一个计算属性 reversedMessage。提供的函数将用作属性 vm.reversedMessage 的 getter。vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。
vue指令之v-show的用法
热门推荐
perry
05-23 15万+
1、判断谋个元素是否显示或隐藏&lt;el-button v-show="list.power == 1" @click="toUpload" class="toUpload" type="primary"&gt;去上传&lt;i class="el-icon-upload el-icon--right"&gt;&lt;/i&gt;&lt;/el-but
Vue(v-show简介)
Mr顺
12-13 3万+
v-show简介 1.v-show指令的作用是：根据切换元素的显示状态 2.原理是修改元素 的display，实现显示隐藏 3.指令后面的内容，最终都会解析为布尔值 4.值为true元素显示，值为false元素隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
元素的隐藏和显示（v-show指令)
01-19 4万+
除了click单击事件，还有mouseover，mouseover等鼠标事件。 dbclick双击事件。v-on:click/mouseover/mouseover/mousedown/dbclick/...v-show指令v-show="true/false" 控制元素显示/隐藏示例代码：<!DOCTYPE html> <html> <head> <title></title>
v-model和v-bind:value的区别
最新发布
05-18
v-model和v-bind:value都是Vue.js中用于绑定数据的指令，但它们的使用场景不同。 v-model是一个语法糖，它可以同时实现表单元素的双向数据绑定，即在视图中修改数据会同步更新模型中的数据，在模型中修改数据也会同步更新视图中的数据。 例如，我们可以使用v-model绑定一个输入框的值： ``` <input v-model="message" /> ``` 上面的代码中，message是Vue实例中定义的一个数据属性，通过v-model绑定到input元素上，当输入框的值改变时，message的值也会随之改变。 v-bind:value则是用于单向绑定数据的指令，它可以将Vue实例中的数据绑定到DOM元素的属性上。例如，我们可以使用v-bind:value绑定一个div元素的title属性： ``` <div v-bind:title="message"></div> ``` 上面的代码中，message是Vue实例中定义的一个数据属性，通过v-bind:value绑定到div元素的title属性上，当message的值改变时，div元素的title属性也会随之改变。 总的来说，v-model用于表单元素的双向绑定，而v-bind:value用于DOM元素属性的单向绑定。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值