社区首页 >问答首页 >@click - vue.js样式绑定

问@click - vue.js样式绑定
EN

Stack Overflow用户

提问于 2019-06-04 00:13:47

回答 2查看 8.8K关注 0票数 3

我正在切换一个元素，在那个时候，想绑定样式另一个元素。但我不知道如何用@click实现这一点

data(){
    return {
        show:false,
        filterStyle: {
            top: 0,
            background: "#dfe4ea",
            marginTop: "15px",
            marginBottom: "15px",
        },
    }
}

methods: {
    closing(){
        this.show = !this.show
    },
}

<p class="closeMap" @click="closing()">close</p>

关闭div以下.

<div v-show="!show"></>

更改样式( div )在.下面

<div :style="filterStyle" class="filter"></div>

有人能解释给我听吗？

编辑:顺便说一句，正如你所看到的，我正在绑定我的风格，没有问题。但不是@click..。我想通过@click绑定这些样式。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-04 00:33:30

我不知道您是否想在show或!show上添加样式，不管怎样，您可以通过以下方式实现：

<div :style="show ? filterStyle : null" class="filter"></div>

只有当filterStyle是show时才会应用true

票数 4

EN

Stack Overflow用户

发布于 2019-06-04 00:33:31

我想您可以创建一个计算属性，它基于this.show进行更改。

// Template
<div :style="filterStyle" class="filter"></div>

// Computed property
computed: {
  filterStyle() {
    if (this.show) {
       return {
         top: 0,
         background: '#dfe4ea',
         marginTop: '15px',
         marginBottom: '15px'
       };
    } else {
      return '';
    }
  }
}

还可以在click函数中将filterStyle设置为其他内容。

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56439880

复制

相关文章

Vue.js 样式绑定

vue.js 编程算法

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

陈不成i

2021/07/27

5.6K0

开心档之Vue.js 样式绑定

vue.js javascript 编程算法

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

iOS程序应用

2023/03/03

1.8K0

vue.js入门篇之Vue.js 样式绑定

bind class error size transform

在 Vue.js 中，我们可以使用 v-bind 来动态设置元素的 class 和 style 样式属性。

iOS程序应用

2023/03/15

2K0

vue.js入门篇之Vue.js 样式绑定

jquery 绑定click事件

有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取

Devops海洋的渔夫

2019/05/30

4.5K0

Vue.js之Vue计算属性、侦听器、样式绑定

1）el（挂载点）创建一个Vue这个实例去接管页面中的某个Element（元素）。也就是说el表明和页面上哪一个节点做绑定！ 2）data vue实例都有一些数据，我们把数据都存放在data中。

用户1195962

2018/09/13

1.8K0

Vue.js之Vue计算属性、侦听器、样式绑定

jquery on绑定click事件执行多次

用$(document).on('click','#XX',function(){...})为元素添加点击事件结果导致事件会执行多次。出现这种情况是因为每点击一下document就会绑定一遍事件，click事件进行了累加绑定，每调用一次，便增加一次绑定，所以导致触发多次事件。

似水的流年

2020/09/11

4.3K0

Knockout.Js官网学习（click绑定）

click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button，input和连接a上，但是可以在任意元素上使用。

aehyok

2018/09/11

2.9K0

Knockout.Js官网学习（click绑定）

uniapp样式绑定方式

uni-app的Class与样式的绑定可用的几种class绑定方式: html  <view class="green">绿色的字体</view> <view style="color: #00FF00;"> 我是一个绿色的内联样式字体</view>  <view :style="{fontSize:fontSize + 'px'}"> 我是一个动态的内联样式字体</

薛定喵君

2019/11/05

4.2K0

如何动态绑定样式

这个是我想要的页面效果，每个卡片的背景颜色都不一样 image.png 第一次需要动态绑定颜色，发现怎么写都不对。。。众大佬支招终于解决了~ 当遍历出来的每个项都需要不同的样式的时候，按照以下这个格式套进去就可以了 :style = "{'background-color':item.bgc}" image.png 如果样式绑定在遍历的每个项中，也可以通过插槽的方式获取到当行的样式 image.png

xyzzz

2020/11/25

2.2K0

vue绑定class样式

在Vue.js中，绑定class样式是一种常用的技术，用于根据条件动态地添加或移除元素的CSS类。通过绑定class样式，您可以根据数据的状态或计算属性来动态改变元素的样式。

堕落飞鸟

2023/05/20

7530

Vue绑定style样式

在Vue.js中，绑定style样式是一种常用的技术，用于根据数据的状态或计算属性动态地修改元素的样式。通过绑定style样式，您可以根据特定条件改变元素的颜色、大小、位置等样式属性。

堕落飞鸟

2023/05/20

1.1K0

jQuery源码解析之click()的事件绑定

一、事件委托 DOM有个事件流特性，所以触发DOM节点的时候，会经历3个阶段：（1）阶段一：Capturing 事件捕获（从祖到目标）在事件自上（document->html->body->xxx）而下到达目标节点的过程中，浏览器会检测针对该事件的监听器（用来捕获事件），并运行捕获事件的监听器。

进击的小进进

2022/03/28

1.8K0

jQuery源码解析之click()的事件绑定

22 内联样式的绑定

内联样式的绑定，与class绑定一样，vue同样做了基于对象绑定与数组绑定的优化。

LIYI

2020/02/13

7600

小程序动态绑定样式

php class data 微信小程序语法

第二步：在js文件中的data中设置一个flag,叫他isChecked，默认isChecked==false。如下：

江一铭

2022/06/16

1.4K0

cssjshtml vue.js 双向绑定

双向绑定示例如下: 源码:  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head>

葫芦

2019/04/17

2.6K0

select动态绑定vue.js

<select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span> 只要保证data里面有个options，options里有value就行了。

ydymz

2018/09/10

6.3K0

十、Vue.js的Class绑定

https 网络安全 vue.js ide 编程算法

十、Vue.js的Class绑定

Java架构师必看

2021/05/14

4.3K0

Vue.js -表单控件绑定原

基础用法你可以用v-model指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素，但v-model本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子，v-model 会忽略所有表单元素的value 、checked、selected特性的初始值。因为它会选择Vue实例数据来作为具体的值。你应该通过JavaScript在组件的data选项中声明初始值文本

tianyawhl

2019/04/04

5.7K0

VUE2.0 学习（六）Vue 里面绑定样式，追加样式，对象形式绑定class

以上就是动态写法，前面的class是固定的，就是基础的样式，我们在后面动态的绑定样式

一写代码就开心

2021/10/18

7610

Vue.js 极简小例： 4 种方式样式绑定、style 的多种方式实现

代码： <template> <div id="app">  <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">样式使用小例</div>  <div style="color: green; font-size: 18px;">此行样式同于上一行</div>  <

微风-- 轻许--

2022/04/13

7180

Vue.js 极简小例： 4 种方式样式绑定、style 的多种方式实现

相似问题

Vue.js中的绑定样式

12

Vue.js:条件类样式绑定

68

Jquery (‘click’) on('click')绑定和取消绑定

20

Vue.js中的条件类样式绑定

227

可以用vue.js绑定内联样式吗？

22

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例