提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue.js：使用v-bind为多个元素绑定style样式案例

VueJS案例 元素 多个 绑定 样式 bind
2023-09-27 14:22:47 时间

使用v-bind为多个元素绑定单个style

此案例主要是通过v-bind：style在元素上绑定单个style，实现为元素设置不同的样式的效果。当在浏览器中的页面进行显示的时候，如果不勾选复选框，则显示如下图1所示的内容，如果勾选复选框，则文本在添加阴影之后的效果如图2所示。

在这里插入图片描述
在这里插入图片描述

相关代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用v-bind为多个元素绑定单个style</title>
  <script src="../BLBL笔记/lib/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <label><input type="checkbox" v-model = "myChecked">是否显示阴影</label>
    <br /><br />
    <div v-bind:style="myChecked?{textShadow:myShadow}:'' ">
      <h3>入我相思门，知我相思苦，长相思兮长相忆，短相思兮无穷极</h3>
    </div>
  </div>
  <script>   
    var app = new Vue({
      el:"#app",
      data:{
        myChecked:false,
        myShadow:'3px 5px 5px #656b79'
      }
    })
  </script>
</body>
</html>

相关代码解释

<div v-bind:style="myChecked?{textShadow:myShadow}:'' ">

该段代码表示当myChecked为真的时候，就会对该段文字进行样式的渲染，否则不进行渲染，myChecked默认的初始值为false

textShadow，在Vue.js中的标准CSS的text-shadow属性可以写成textShadow这种形式，一般是text-shadow的形式，这种形式称为驼峰标识符，有想了解的可以自己去查资料看一看哦~

================================

使用v-bind为多个元素绑定内敛style

此案例主要是通过将多个样式以内联风格设置v-bind：style属性值，实现为元素同时设置多种样式的效果 ，当在浏览器中显示页面时，如果不勾选复选框，则文本显示效果如图一所示，如果勾选复选框，则文本在添加阴影和斜体样式之后的效果如图二所示。

在这里插入图片描述
在这里插入图片描述

相关代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用v-bind为多个元素绑定内敛style</title>
  <script src="../BLBL笔记/lib/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <label><input type="checkbox" v-model = "myChecked">是否启用内联样式</label>
    <br /><br />
    <div v-bind:style="myChecked?{textShadow:myShadow,fontStyle:myItalic}:'' ">
      <h3>入我相思门，知我相思苦，长相思兮长相忆，短相思兮无穷极</h3>
    </div>
  </div>
  <script>   
    var app = new Vue({
      el:"#app",
      data:{
        myChecked:false,
        myShadow:'5px 2px 6px #000000',
        myItalic:'italic'
      }
    })
  </script>
</body>
</html>

相关代码解释

<div v-bind:style="myChecked?{textShadow:myShadow,fontStyle:myItalic}:'' ">

上面这段代码，是以内联风格设置的多种样式，如果myChecked为true时，则对文本内容进行样式的渲染，当然内联样式我们也可以直接使用对象来代替，相关的实现代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用v-bind为多个元素绑定内敛style</title>
  <script src="../BLBL笔记/lib/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <label><input type="checkbox" v-model = "myChecked">是否启用内联样式</label>
    <br /><br />
    <div v-bind:style="myChecked?myObject:'' ">
      <h3>入我相思门，知我相思苦，长相思兮长相忆，短相思兮无穷极</h3>
    </div>
  </div>
  <script>   
    var app = new Vue({
      el:"#app",
      data:{
        myChecked:false,
        myObject:{
          textShadow:'5px 2px 6px #000000',
          fontStyle:'italic'
        }
      }
    })
  </script>
</body>
</html>

================================

使用v-bind通过数组绑定多个style
此案例主要通过使用数组设置v-bind：style属性值，实现为元素同时设置多种样式的效果。当在浏览器中显示页面的时候，如果勾选复选框“阴影”，则图片的显示多加个阴影，如果同时勾选复选框“阴影”和“水平镜像”，则显示效果为阴影和镜像同时生效

相关代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用v-bind通过数组绑定多个style</title>
  <script src="../BLBL笔记/lib/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <p>
      <label>
        <input type="checkbox" v-model = "myChecked1">阴影
      </label>
      <label>
        <input type="checkbox" v-model = "myChecked2">水平镜像
      </label>
    </p>  
    <img src="./image/lingxiaohu1223.jpg" v-bind:style = "[myChecked1?{boxShadow:myShadow}:'',myChecked2?{transform:myTransform}:'']">
    </div>
  </div>
  <script>   
    var app = new Vue({
      el:"#app",
      data:{
        myChecked1:false,
        myChecked2:false,
        myShadow:'10px 10px 10px rgba(0,0,0,.5)',
        myTranform:'rotateY(180deg)'
      }
    })
  </script>
</body>
</html>

================================

使用v-bind通过对象绑定多个style

相关代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用v-bind通过对象绑定多个style</title>
  <script src="../BLBL笔记/lib/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <p>
      <label>
        <input type="checkbox" v-model = "myChecked1">阴影
      </label>
      <label>
        <input type="checkbox" v-model = "myChecked2">错切
      </label>
    </p>  
    <img src="./image/lingxiaohu1223.jpg" v-bind:style = "myObject">
    </div>
  </div>
  <script>   
    var app = new Vue({
      el:"#app",
      data:{
        myChecked1:false,
        myChecked2:false
      },
      computed: {
        myObject() {
          return {
            boxShadow:this.myChecked1?'10px 10px 10px rgba(0,0,0,.5)':'',
            transform:this.myChecked2?'skewX(30deg)':''
          }
        }
      }
    })
  </script>
</body>
</html>

案例效果图

在这里插入图片描述

================================

所以，有关v-bind对style所有的绑定方式大概就这么多了，仅供参考，代码都可以正常运行的~

相关文章