一 创建测试项目

vue init webpack-simple vuedemostyle

二 进入demo目录

cd vuedemostyle

三 安装依赖

cnpm install

四 修改代码App.vue

<template>
  <div id="app">
    <h2>{{msg}}</h2>
    <br>
    <h2>1 v-bind to bind Property  v-bind:title</h2>
    <div v-bind:title="title">mouse move over and have a look </div>

  <h2>2 v-bind to bind Property  v-bind:src</h2>
  <img src="https://img.haomeiwen.com/i31578/c9bdd889b2423a9a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300"/>
  <br>
    <img v-bind:src="url"/> 
    <br>
    
    <h2>v-bind</h2>
    <img :src="url"/>   
    <br>
    
    
    {{h}}
    
    <h2>3 v-bind to bind Property  v-bind:html</h2>
    <div v-html="h"></div>  

  <h2>4 v-bind to bind Property  v-bind:text</h2>
    <div v-text="msg">
    </div>
  {{msg}}
    
    
  <h2>5 v-bind to bind Property  v-bind:class</h2>
    <ul>
    <li v-for="(item,key) in list" :key="item.id">
            {{key}}--{{item}}
  </li>
  </ul> 

  <ul>
    <li v-for="(item,key) in list" :key="item.id" :class="{'red':key===0,'blue':key===1}">
            {{key}}--{{item}}
  </li>
  </ul>     
    
    <div v-bind:class="{'red':flag}" >
        i am a div
    </div>
    
    <div v-bind:class="{'red':flag, 'blue':!flag}" >
        i am other div
    </div>

  <h2>6 v-bind to bind Property  v-bind:style</h2>
  <div class="box" v-bind:style="{'width':boxWidth + 'px'}"></div>
    
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      title: 'i am a title ',
      url: 'https://img.haomeiwen.com/i31578/c9bdd889b2423a9a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300',
      
      h: '<h2>i am h2 </h2>',     
      list:['1111', '2', '33'],
      flag: false,
    boxWidth:300

    }
  }
}
</script>

<style>
 .red{
    color: red;
 }
 .blue{
    color: blue;
 }

 .box {
   height: 100px;
   width: 100px;
   background: red;

 }

ol{padding-left: 20px;}

ol li{
  list-style-type:decimal;
  list-style-position:inside;
}
</style>

五 运行

npm run dev

image.png

六 总结

1 使用v-bind绑定property ,如src，id，href等
2 使用 v-html进行html原样输出插值
2 输入v-bind绑定class,可以动态切换class，class列表，
3 使用v-bind绑定style，直接在网页上使用类css语法，定义样式

七 参考

https://vuejs.org/v2/guide/class-and-style.html