vue 点击按钮变色_一个Vue.js实例控制字变大变小，含样式操作，flex布局。「603」...

最新推荐文章于 2024-04-19 10:04:42 发布
最新推荐文章于 2024-04-19 10:04:42 发布
阅读量840 收藏
点赞数
文章标签： vue 点击按钮变色 vue 设置字体无效 从左往右 从上到下依次排序 flex css
  • 这是一个用vue.js对css操作完成的实例。
  • 当然用了flex简单布局。
caa71af995af148e7fe2e91adeb77feb.gif

一、先创建一个html文件，记得添加vue库文件。

266601bfb5208a58b29ad9b18f4c80a2.png

二、创建一盒容器vmdiv，用vue绑定它，测试vue绑定后的插入值text1效果。

5b70b257c0a5ba2881f0ae982ee21a6a.png
f1ad744096059a620d79946315c280b5.png

三、加入文本框和两个按钮。

4e53d75b6f937cc07b5d28480751d033.png
0bbfb190e45849d49305850e50585542.png

四、通过flex排序，让它们三个竖排。比例为文本框占4，按钮占1。

3b81119f15cf4c446e306885dd87d37c.png
e4af306c63458a6e8f05177f8cf96549.png

五、测试一下按钮的点击事件。

f6b9441c1451af5840d859a417cf62d9.png
3e155e6d77d53ecfa9d4e776f6d6ed15.gif

六、给文本框添加style样式，给它字体大小为16px，并设置一个变量size，让它来控制字的大小，通过点击后，字变大加5，变小减5。

5d24ed4c01ca55de6a3c79d2f3b3870b.png
dcc84a699b517374186797f57a378a58.png 
 Document
点我变大 点我变小
weixin_39756540
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【VUE】微商城（五）----快速导航按钮布局实现
Robin的博客
04-06 1448
1、打开mui文档 找到九宫格 点击进入 2、复制九宫格代码 <ul class="mui-table-view mui-grid-view mui-grid-9"> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> <span class="mui-icon mui-icon-home"></span> <di
利用vuex实现控制字体大小的改变
a432qbc的博客
08-09 570
思路：利用vuex实现控制字体大小的改变 store.js localStorage.getItem避免再次打开页面后字体大小发生改变，两个方法用于控制两种字体大小 const FZ = 'FZ' const FZ1 = 'FZ1' export default new Vuex.Store({ state: { fontSize:localStorage.getItem(FZ) || '14px', fontSize1: localStorage.getItem(FZ1) || '20
vue通过组件实现点击数字变大变小-进行父传值给子
qq_40994735的博客
08-31 1151
1 案例实现的目标 可以设置每次增加的值 可以设置的范围，可以设置该范围内的值为最大值 增加框的数不能随意设置，具有一定的范围 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></s
解决vue2点击表单页面放大的问题
最新发布
qq_39267979的博客
04-19 254
title:“录入证书”,这种方法，我这试着没有效果。1、在路由js文件里加上。这种方法用着是可以的。
vue 点击子组件按钮，把父组件字体放大（子组件给父组件传值）
lengleng0107的博客
01-05 2230
先上效果图 我把我的代码都加了注释，其他就不说了，直接放代码了 <body> <template id="erzi"> <div> <!-- @click 点击事件 --> <button @click="big">我是子组件，点我父类组件字体变大</button> </div> </template>
使用vue实现点击段落放大功能
Ted_az的博客
09-17 739
vue
Vue.js点击切换按钮改变内容的实例讲解
10-18
今天小编就为大家分享一篇Vue.js点击切换按钮改变内容的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue.global.js，Vue.js 框架的核心文件之一
08-11
`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。 该文件对整个 Vue.js 应用的运行起着重要的作用，它提供了全局范围的 Vue 构造函数和一些全局...
博客网_模板_javascript_vue.js_
10-02
Vue.js 是一个流行的前端JavaScript框架，由尤雨溪创建，旨在简化Web应用开发。它的核心理念是组件化，允许开发者将UI拆分为可复用的模块，从而提高代码的可维护性和效率。在"博客网_模板_javascript_vue.js_"这个...
vue-grid-layout：Vue.js的可拖动和可调整大小的网格布局
02-06
Vue网格布局 什么是Vue网格布局？ vue-grid-layout是的网格布局系统，例如 。 受极大启发 产品特点 可拖动的小部件 可调整大小的小部件 静态小部件 边界检查以进行拖动和调整大小 可以在不重建网格的情况下添加或...
Vue.js 点击按钮显示/隐藏内容的实例代码
10-18
下面小编就为大家分享一篇Vue.js 点击按钮显示/隐藏内容的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue实现点击更改页面字体大小
hhmmj的博客
07-26 2332
Vue实现点击更改页面字体大小
Vue3 || 一键切换字号/背景色
weixin_45862553的博客
01-12 2012
总的思路就是这句话：window.document.documentElement.setAttribute(‘变量名’, 值);
vue3 按钮切换页面背景颜色以及字体大小
weixin_44325341的博客
05-13 6386
一、背景颜色 1.最终效果： 2.代码： 二、字体大小 1.最终效果：
vue中 关于$emit的用法
热门推荐
榴莲不好吃的专栏
11-21 80万+
1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn； 例如：子组件： <template> <div class="train-city"> &l............
Vue基础-自定义指令
m0_59069134的博客
06-09 388
Vue自定义指令语法解析
vue项目设置活性字体（自适应字体大小）
LIMI_伞梦的博客
12-10 2万+
步骤1： 在vue的App.vue页面设置全局字体大小 mounted() { let width=$("body").width(); if(width>=1200){ let fontsize=width/1920*40;//fontsize为当前屏幕的基数字体，相对于设计稿计算得到的。 $("html").css("font-size",`${fontsize}px`) }//当加载页面的时候设置生效 window.
vue中button如何改变文字的大小_Vue进阶属性
weixin_29821699的博客
02-03 4941
一、Directives 指令两种写法：1、声明一个全局指令Vue.directive('x', directiveOptions)就可以在任何组件里使用v-x了例如：声明一个全局指令在App.vue里点击图片,在HelloWorld.vue点击标题。都会打印x2、声明一个局部指令new Vue({ ..., directives: { "x": directiveOptions } })v-x只...
Vue3自定义按钮点击变色
m0_64054560的博客
02-15 4641
vue3简单实现点击变色，默认选中第一个按钮，未选中按钮为粉色，点击时颜色变为红色
vue点击按钮切换按钮名字_Vue.js 2一个简单漂亮的切换按钮
06-08
你可以使用Vue.js的数据绑定和条件渲染来实现按钮名字的切换。以下是一个简单的示例： HTML代码： ```html <div id="app"> <button v-on:click="toggle">{{ buttonLabel }}</button> </div> ``` Vue.js代码： ```javascript new Vue({ el: '#app', data: { buttonLabel: '点击切换' }, methods: { toggle: function() { if (this.buttonLabel === '点击切换') { this.buttonLabel = '切换成功'; } else { this.buttonLabel = '点击切换'; } } } }); ``` 在上面的代码中，我们定义了一个按钮，它的文本内容是 `buttonLabel` 变量的值，初始值为“点击切换”。当按钮被点击时，我们通过 `toggle` 方法来切换 `buttonLabel` 变量的值。如果 `buttonLabel` 的值是“点击切换”，则将其设置为“切换成功”，否则将其设置为“点击切换”。这样就可以实现按钮名字的切换了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值