vue指令之v-bind、v-on、v-once、v-html、v-text

v-bind绑定class、style

除了数据的动态实现，我们知道渲染的时候样式是必不可少的，接下来介绍vue中如何动态的使用v-bind绑定元素类名class,style来动态的给dom节点添加和修改删除样式。

v-bind绑定class

//v-bind:class 可以简写为：class
//类名需要添加单引号，变量不用
# class类名是一个对象的情况
	//上面的语法表示active这个class存在与否将取决于数据属性isActive是否为true。green同理。
	//此外，v-bind：class指令也可以与普通的class属性共存 -->
    <div id="app" v-bind:class="{'active':isActive,'green':isgreen}"
    							class="active">
    </div>
# class类名是一个数组的情况
  	//静态绑定多个类名
    <div id="app1" v-bind:class="['active','green']"></div>

    //动态实现类名选择 三元运算符-->
    <div id="app2" v-bind:class="[isActive? 'active':'',isgreen? 'green':'']"></div>
<script>
	  var vm=new Vue({
            el:'#app',
            data:{
                isActive:false,
                isgreen:true,
            }
        })
</script>
<style>
        .active{
            width: 150px;
            height: 150px;
            background-color:red;
        }
        .green{
            width: 100px;
            height: 100px;
            background-color:green;
        }
    </style>

v-bind绑定style

//v-bind 绑定style只有是值是对象的情况
//v-bind绑定内联样式 
   //-静态的为style绑定样式 第一个color是指属性，第二个color是变量
    <div id="app3" :style="{color:color,fontSize:size}">hi Vue</div>

  // 动态为style绑定样式 如果是样式则加单引号
    <div id="app4" :style="{color: isred? '#FF0000':''}">我是谁</div>

<script>
	 var vm4=new Vue({
            el:"#app3",
            data:{
                color:'red',
                size:'50px',
            }
        })
</script>

v-once指令

// v-once  只能渲染一次，但数据改变，再次渲染的数据不会渲染到界面上
       <div>{{msg}}</div>
       <div v-once>{{msg}}</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'hello world',
           }
       })
</script>

v-html指令

//v-html  可以渲染处含有dom标签元素
	<div id="app">
       <div v-html='richText'></div>
    </div>
<script>
       var vm=new Vue({
           el:'#app',
           data:{
                richText:'<div><h1>富文本</h1><i></i></div>'
           }
      })
   </script>

v-text指令

 v-text  把属性中的内容直接显示出来  不会对html标签进行解析
 <div id="app">
     <div v-text="richText"></div>
 </div>
 <script>
       var vm=new Vue({
           el:'#app',
           data:{
                richText:'<div><h1>富文本</h1><i></i></div>'
           }
       })
   </script>