Vue入门之数据绑定(小结)(2)

日期：2020-05-11 栏目：程序人生浏览：次

4. Vue属性绑定

Vue中不能直接使用{{ expression }}语法进行绑定html的标签，而是用它特有的v-bind指令（就是一种写法，先按照格式走，具体指令是什么可以后续再了解）。

绑定的语法结构：

<标签 v-bind:属性名="要绑定的Vue对象的data里的属性名"></标签>
例如:
<span v-bind:id="menuId">{{ menuName }}</span>

参考如下代码案例：

<!DOCTYPE html> 
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue入门之数据绑定--属性绑定</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 <div id="app">
  <div v-bind:id="MenuContaineId">
   <a href="#" v-bind:class="MenuClass">首页</a>
   <a href="#" v-bind:class="MenuClass">产品</a>
   <a href="#" v-bind:class="MenuClass">服务</a>
   <a href="#" v-bind:class="MenuClass">关于</a>
  </div>
 </div>

 <script>
  var app = new Vue({     
   el: '#app',        
   data: {          // data: 是Vue对象中绑定的数据
    MenuClass: 'top-menu',
    MenuContaineId: 'sitemenu'
   }
  });
 </script>
</body>
</html>

5. 属性绑定简写

由于v-bind使用非常频繁，所以Vue提供了简单的写法，可以去掉v-bind直接使用:即可。

例如：
<div :id="MenuContaineId">
等价于
<div v-bind:id="MenuContaineId">

6. 输出纯HTML

由于Vue对于输出绑定的内容做了提前encode，保障在绑定到页面上显示的时候不至于被xss攻击。但某些场景下，我们确保后台数据是安全的，那么我们就要在网页中显示原生的HTML标签。Vue提供了v-html指令。

<div id="app">
 <div v-bind:id="MenuContaineId" v-html="MenuBody">
 </div>
</div>
<script>
 var app = new Vue({     
  el: '#app',        
  data: {          // data: 是Vue对象中绑定的数据
   MenuContaineId: 'menu',
   MenuBody: '<p>这里是菜单的内容</p>'
  }
 });
</script>

结果：

<div id="app">
 <div id="menu">
  <p>这里是菜单的内容</p>
 </div>
</div>

7. 样式绑定

对于普通的属性的绑定，只能用上面的讲的绑定属性的方式。而Vue专门加强了class和style的属性的绑定。可以有复杂的对象绑定、数组绑定样式和类。

7.1. 绑定样式对象

Vue入门之数据绑定(小结)(2)

相关推荐