vuejs教程：v-bind绑定指令操作或赋值给HTML属性，改变样式

2018-09-2916:15:45WEB前端开发Comments2,813 views字数 9213阅读模式

学习如何操作或赋值给HTML属性，改变样式，以及借助VueJS提供的v-bind的绑定指令来分配类。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

通过下面一个例子来理解为什么需要以及何时使用v-bind指令进行数据绑定。创建一个文件：binding.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs绑定数据示例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         {{title}}<hr/>
         <a href = "hreflink" target = "_blank"> 点击我 </a> <br/>
         <a href = "{{hreflink}}" target = "_blank"> 点击我 </a>  <br/>
         <a v-bind:href = "hreflink" target = "_blank">易百教程 </a>   <br/>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               title : "数据绑定",
               hreflink : "http://www.yiibai.com"
            }
         });
      </script>
   </body>
</html>

在上面的例子中，显示了一个标题变量和三个锚链接。还从数据对象中为href赋值。现在，如果在浏览器中查看输出并检查，将会看到前两个锚链接没有正确的href，如下面的截图所示。
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

第一个链接的href属性的值显示为hreflink，第二个链接的href属性的值为{{hreflink}}，而最后一个显示正确的url：http://www.yiibai.com 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

因此，要为HTML属性赋值，需要按如下方式将其绑定到指令v-bind。如下语句 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

<a v-bind:href = "hreflink" target = "_blank">Click Me </a>

VueJS还提供了v-bind指令的简写，如下所示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

<a :href = "hreflink" target = "_blank">Click Me </a>

如果在浏览器中看到检查元素，那么定位标记不会显示v-bind属性，但它会显示纯HTML。当我们查看DOM时，没有看到VueJS属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

绑定HTML类

要绑定HTML类，需要使用v-bind:class。下面来看看一个例子，并在其中绑定类。创建一个文件：bind-classes.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs绑定数据示例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .active {
            background: red;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "{active:isactive}"><b>{{title}}</b></div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "绑定HTML类",
               isactive : true
            }
         });
      </script>
   </body>
</html>

有一个用使用v-bind: class=” {active: isactive}”创建的div。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

在这里，isactive是一个基于true/false的变量。它会将活动类应用于div。在数据对象中，已经将isactive变量赋值为true。在样式.active中定义了一个类，背景色为红色(red)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

如果变量isactive是true，则颜色将被应用，否则不会被应用。以下将是浏览器中的输出 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

在上面的显示中，可以看到背景颜色是红色的。class ="active"应用于div。
现在，将变量的值更改为false并查看输出。如下面的代码所示，将变量isactive更改为false -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

示例一

创建一个文件：binding-example.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs绑定数据示例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <div class = "info"  v-bind:class = "{ active: isActive, 'displayError': hasError }">
            {{title}}
         </div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "这是一个类绑定示例~",
               isActive : false,
               hasError : false
            }
         });
      </script>
   </body>
</html>

对于上面代码中的div，已经应用了一个普通的类，例如class ="info"。基于isActive和hasError变量，其他类将被应用于div。显示效果如下 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

这是一个正常的类应用。这两个变量现在都是false。让isActive变量为true并查看输出 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

在上面的显示中，在DOM中可以看到两个类被分配给div，info和active。让hasError变量为true，isActive为c。效果如下 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

现在，在上面的显示中看到，info和displayError类被应用于div。这就是如何根据条件应用多个类。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

也可以将类作为数组传递。让我们举个例子来理解这一点。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

示例二

创建一个文件：binding-example2.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs绑定数据示例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 18px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "[infoclass, errorclass]">{{title}}</div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "这是一个类绑定示例2~",
               infoclass : 'info',
               errorclass : 'displayError'
            }
         });
      </script>
   </body>
</html>

输出结果如下 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

正如上面看到的，这两个类都被应用到div。使用一个变量，并根据变量的值，分配类。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

修改上面文件：** 中的代码为 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs绑定数据示例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 18px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example ~",
               infoclass : 'info',
               errorclass : 'displayError',
               isActive : true,
               haserror : false
            }
         });
      </script>
   </body>
</html>

下面使用两个变量isActive和haserror，div类使用相同的类，如下面的div标签所示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

<div v-bind:class = "[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div>

现在，将haserror变量设置为true，将isActive变量设置为false。效果如下 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

下面将为组件中的类添加v-bind。在下面的例子中，我们已经向组件模板和组件添加了一个类。
创建一个文件：binding-for-component.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 18px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <new_component class = "active"></new_component>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "这是一个类绑定示例",
               infoclass : 'info',
               errorclass : 'displayError',
               isActive : false,
               haserror : true
            },
            components:{
               'new_component' : {
                  template : '<div class = "info">为组件绑定类</div>'
               }
            }
         });
      </script>
   </body>
</html>

以下是浏览器中的输出，它将这两个类应用于div上。
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

根据true/false在组件部分添加一个变量来显示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 25px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <new_component v-bind:class = "{active:isActive}"></new_component>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               infoclass : 'info',
               errorclass : 'displayError',
               isActive : false,
               haserror : true
            },
            components:{
               'new_component' : {
                  template : '<div class = "info">Class Binding for component</div>'
               }
            }
         });
      </script>
   </body>
</html>

由于该变量为false，所以不应用active类，并按照以下屏幕截图所示应用info类。
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

绑定内联样式

创建一个文件：binding-inline-styles.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs绑定数据示例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               title : "Inline style Binding",
               activeColor: 'red',
               fontSize :'30'
            }
         });
      </script>
   </body>
</html>

在浏览器中输出结果如下 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

在上面的示例中，对于div，应用样式并从数据对象中提取数据。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

<div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div>
data: {
   title : "Inline style Binding",
   activeColor: 'red',
   fontSize :'30'
}

也可以通过把所有的值赋给一个变量，然后把变量赋值给div来做同样的事情。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

创建一个文件：binding-inline-styles2.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-bind:style = "styleobj">{{title}}</div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               title : "Inline style Binding",
               styleobj : {
                  color: 'red',
                  fontSize :'40px'
               }
            }
         });
      </script>
   </body>
</html>

color和fontSize分配给名为styleobj的对象，同样的分配给div。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

<div v-bind:style = "styleobj">{{title}}</div>

在浏览器中输出结果如下 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

表单输入绑定

到目前为止，在前面创建的例子中，已经看到v-model绑定输入文本元素和绑定到指定变量的值。下面将了解表单输入绑定。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

创建一个文件：form-input-bindings.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <h3>TEXTBOX</h3>
         <input  v-model = "name" placeholder = "Enter Name" />
         <h3>Name entered is : {{name}}</h3>
         <hr/>
         <h3>Textarea</h3>
         <textarea v-model = "textmessage" placeholder = "Add Details"/>
         <h1><p>{{textmessage}}</p></h1>
         <hr/>
         <h3>Checkbox</h3>
         <input type = "checkbox" id = "checkbox" v-model = "checked"> {{checked}}
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               name:'',
               textmessage:'',
               checked : false
            }
         });
      </script>
   </body>
</html>

无论在输入框中键入的内容是什么，v-model都会被分配值给name，它显示在{{name}}域中，在下面也会显示在文本框中输入的内容。
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

单选和下拉项文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

创建一个文件：form-radio-select.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <h3>Radio</h3>
         <input type = "radio" id = "black" value = "Black" v-model = "picked">Black
         <input type = "radio" id = "white" value = "White" v-model = "picked">White
         <h3>Radio element clicked : {{picked}} </h3>
         <hr/>
         <h3>Select</h3>
         <select v-model = "languages">
            <option disabled value = "">Please select one</option>
            <option>Java</option>
            <option>Javascript</option>
            <option>Php</option>
            <option>C</option>
            <option>C++</option>
         </select>
         <h3>Languages Selected is : {{ languages }}</h3>
         <hr/>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               picked : 'White',
               languages : "Java"
            }
         });
      </script>
   </body>
</html>

在浏览器中浏览如下 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

修饰符文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

在下面这个例子中，我们将使用三个修饰符 - trim，number和lazy。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

创建一个文件：** -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <span style = "font-size:25px;">Enter Age:</span> <input v-model.number = "age" type = "number">
         <br/>
         <span style = "font-size:25px;">Enter Message:</span> <input v-model.lazy = "msg">
         <h3>Display Message : {{msg}}</h3>
         <br/>
         <span style = "font-size:25px;">Enter Message : </span><input v-model.trim = "message">
         <h3>Display Message : {{message}}</h3>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               age : 0,
               msg: '',
               message : ''
            }
         });
      </script>
   </body>
</html>

在浏览器中浏览如下 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

number修饰符 只允许输入数字。除了数字之外，不会有其他的输入。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

<span style = "font-size:25px;">Enter Age:</span> <input v-model.number = "age" type = "number">

当完全输入并且用户离开文本框，Lazy修饰符 将显示文本框中的内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

<span style = "font-size:25px;">Enter Message:</span> <input v-model.lazy = "msg">

trim修饰符 将删除在开始和结束时输入的任何空格。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

<span style = "font-size:25px;">Enter Message : </span><input v-model.trim = "message">

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5968.html

vuejs教程：v-bind绑定指令操作或赋值给HTML属性，改变样式

绑定HTML类

示例一

示例二

绑定内联样式

表单输入绑定

编写异步 JavaScript 的 10 个最佳实践

搞懂 Vue3 defineModel 双向绑定：告别繁琐代码！

Tailwind CSS响应式Web设计全面掌握指南

全栈开发使用Node js（Express）、MYSQL进行CRUD

TypeScript项目搭配Axios封装后端接口调用

jQuery 4.0 测试版，体积小性能好不再支持 IE 10

JavaScript实现轮播图方法，代码简单

Next.Js 与 Tailwind 项目开发笔记

使用Vite创建Vue3项目并开发第一个组件

asyncio 中并发运行的多个任务要如何精确控制

Comment