样式的双向绑定的2种方式,实现样式交互效果

与样式标签实现双向绑定

  • 通过布尔值来决定样式是出现还是消失

    show代表着布尔值,show的初始值是false所以文本不会有高亮的效果,当用户点击了按钮,就会调用shows这个函数,并将show的相反值true赋值并覆盖给show,此时show的值为true,这个时候样式起效实现高亮效果

vue 复制代码
<template>
<div :class="{'backgroundColor': show}">王侯将相另有种乎</div>
<div><button @click="shows">高亮</button></div>
</template>

<script setup>
import {ref} from 'vue'
const show = ref(false)
const shows = () =>{
  show.value =! show.value
}
</script>

<style>
.backgroundColor{
  background-color: yellow
}
</style>
  • 效果如下:
  • 列表格式的样式绑定

    用于实现多从复杂的效果样式,指那些通过用户交互实现双向绑定的样式效果,例如用户在色彩盘中选择颜色,对应背景颜色,字体等样式发生改变。这样使得页面上的效果有了交互的效果,可以用于用户的自定义个性化界面!!!在双向样式绑定数组中可以无限添加新的样式,若出现重复的样式,后面的样式会覆盖前面的样式。

vue 复制代码
<template>
  <p     :style="[obj,obj2]"   >
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas eum suscipit beatae hic omnis. Quisquam saepe recusandae quas in, esse ipsum eius id perspiciatis minus earum? Qui nemo atque neque!

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos debitis enim quis possimus, natus quia voluptatem vero amet numquam, necessitatibus, ratione deserunt culpa similique aperiam facilis modi ducimus officiis? Aspernatur.
  </p>
  <hr>
调整字体的颜色:
  <input type="color" v-model="obj.color">
  <hr>
调整背景的颜色:
<input type="color"  v-model="obj.backgroundColor">
<hr>
调整字体的大小
  <input type="text" v-model="obj.fontSize">
  <hr>
调整边框的弧度
  <!--  v-bind   属性绑定, 绑定的值里面是js的合法表达式    -->
  <input type="range"  :min=" minval *2 + 9"  :max="maxval" v-model="ccc">
  <hr>
</template>
<script   setup>
import {ref,  reactive  , computed} from 'vue'
const minval=ref(1);
const maxval =ref(50);
const ccc =ref(0)
// 实现边框弧度的调节
const bor = computed(

  ()  =>   ccc.value + 'px'

);
const obj = reactive({
  color: '',
  fontSize: "",
  backgroundColor:'', 
  'border-radius': '1px',
  border:'2px dashed',
  padding:'20px',

})

const obj2 = reactive(
  {
      margin:"200px",
      borderRadius:bor
  }
)
</script>


<style>

p {
  color: red;
  border: 1px solid;
  background-color: lightblue;
  border: 2px dashed;
  padding: 20px;

 
}
</style>
  • 效果如下:

相关推荐
00后程序员张21 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
gplitems1231 天前
Consua WordPress Theme — Business Consulting Sites That Convert With Clarity
javascript
雾削木1 天前
stm32解锁芯片
javascript·stm32·单片机·嵌入式硬件·gitee
2301_768350231 天前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
小周同学:1 天前
Vue项目中将界面转换为PDF并导出的实现方案
javascript·vue.js·pdf
华洛1 天前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品
明远湖之鱼1 天前
opentype.js 使用与文字渲染
前端·svg·字体
90后的晨仔1 天前
Vue 3 组合式函数(Composables)全面解析:从原理到实战
前端·vue.js
今天头发还在吗1 天前
【React】TimePicker进阶:解决开始时间可大于结束时间的业务场景与禁止自动排版
javascript·react.js·ant design
今天头发还在吗1 天前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架