Vue绑定属性绑定Class 绑定style-蒲公英云

Vue绑定属性绑定Class 绑定style

vue是如何绑定属性和class以及style的

下面我将会插入一段代码，本人在代码里做了相当详细的注释。

<template>
<!-- vue 的模板里面，所有的内容要被一个根节点包含起来-->
  <div id="app">
    <h3>{
   {msg}}</h3> <!-- 绑定业务逻辑里的数据-->
    <br>
    <div v-bind:title="title">鼠标悬停试试看，冒号后面的title是固定语法，详情可见官方文档</div>
    <hr>
    <img src="./assets/M.jpg"/>
    <br>
    <br>
    <!-- 绑定属性 -->
    <img v-bind:src="url"/><!-- 绑定了业务逻辑层里的url-->
    <!-- 与下面这句语法效果一样 -->
    <br>
    <img :src='url'/>
    <br>
    <br>
    <!--绑定HTML -->
    {
   {h}}
    <!--与下面显示效果完全不同，请注意页面的显示-->
    <div v-html="h"></div>
    <br>
    <br>
    <!-- 绑定数据的另一种方法 -->
    <div v-text="msg">
    </div>
    <br>
    <br>
    <!-- v-bind:class :class的使用 -->
    <div v-bind:class="{ 'red':flag}">  <!--red为在style中定义的一个class,会使用到'red' class里定义的样式。 flag为引用的一个属性(为true时执行),在逻辑层里定义-->
    <!-- <div v-bind:class="'red'"> 这种语法格式就是普通格式，没有引用flag属性 -->
      我是第一个div
    </div>
    <br>
    <br>
    <div :class="{ 'red':flag,'blue':!flag}"> <!--与上一种语法说明同理，只不过是多了一个'blue' class -->
      我是第二个div
    </div>
    <br>
    <br>
    <!-- 循环数据 第一个数据高量 -->
      <ul>
        <li v-for="(item,key) in list"><!--可以看到增加了一个key，key为索引值从0开始-->
         {
   {key}}---{
   {item}}             <!--在页面中仔细查看输出-->
        </li>
      </ul>
        <br>
      <ul>
        <li v-for="(item,key) in list" :class="{ 'red':key==0,'blue':key==1}">
                                <!-- 这里的class指定了 key=0应用'red'样式，key=1应用'blue'样式-->
          {
   {key}}---{
   {item}}
        </li>
      </ul>
      <br>
      <br>
      <!-- v-bind:style :style的使用 -->
      <div class="box" v-bind:style="{ 'width':boxWdith+'px','height':boxHeight+'px'}">
      <!--应用'box'class——>绑定style属性——>手动改变width属性值需在逻辑层里添加boxWidth数据,height属性同理-->
      <!--绑定class也可以用到上面所说的语法，<div v-bind:style="{'width':boxWdith+'px'}" :class="'box'">-->
      我是另一个div
    </div>
  </div>
</template>
<script> export default { // 表示将组件暴露出去 // name: 'App', 给组件起个名字，可以删除 data () { //业务逻辑里定义的数据 return { msg: '今天依然很好', // msg: "今天依然很好" 这里单引号和双引号是一样的结果 title:'这里是个标题', //url:require('./assets/M.jpg'), //在这里定义了url url:'./static/M.jpg', //此种路径问题也是一个重点问题，在此先不做讲解 h:'<h3>这里是一个h标签</h3>', //在逻辑层里写上HTML，需要在template绑定才可以正常显示 flag:true, list:['123','456','789'], boxWdith:500, boxHeight:500 } } } </script>
<style> .red{ color: red; } .blue{ color:blue; } .box{ height: 100px; width: 100px; background: red; } </style>