vue常用指令

一、v-bind的基本用法。

1. vue的属性绑定一般都用v-bind来绑定属性
2. v-bind可以简写为：，例如：<a v-bind:href="url">链接</a>可简写为：<a :href="url">
3. 属性值可包含 src,title,class,href等
4. bind的属性值对应data中的变量
5. 例：

           <p :style="{color:fontColor}">{{msg}}</p>
           <!-- v-bind绑定了data数据里的图片地址,只需要加个冒号即可 -->
           <p><img v-bind:src='imgSrc' width='200px'  /></p>
           <p><a :href='url' target='_blank'>测试</a></p>
           <div :class='className'>1、绑定class</div>
           <div :class='{classA:isok}'>2、绑定class中的判断</div>
           <div :class='{classA,classB}'>3、绑定class中的数组</div>
           <!-- 正确的视化显示classA，错误的时候显示classB.比如案例中错误登陆的时候样式变化 -->
           <div :class='isOk?classA:classB'>4、绑定class中的三元运算符</div>
           <div>
               <input type='checkbox' id='isOk' v-model='isOk'>
               <label for='isOk'>isOk={{isOk}}</label>
           </div>
           <hr>
           <div :style='{color:red,fontsize:font}'>5、绑定style值</div>
           <div :style='styleObject'>6、绑定style的对象</div>
   

二、v-text的基本用法

1. 是用于操作纯文本，当绑定的数据对象上的值发生改变，插值处的内容也会随之更新

   <p>{{msg}}</p>
   <p v-text="msg"></p>

    

三、v-html的基本用法

1. 是可用于操作html标签，会将其当html标签解析后输出
2. v-text可以简写为{{}},并且支持逻辑运算

   <p v-html="msg"></p>

    

四、v-model的基本用法

1. v-model通常用于表单组件的绑定，例如input，select等
2. 与v-text的区别在于它实现的表单组件的双向绑定
3. 表单控件以外标签是没有用

   <input v-model="message " />

   <div id="app-6">
     <p>{{ message }}</p>
     <input v-model="message">
   </div>
   var app6 = new Vue({
     el: '#app-6',
     data: {
       message: 'Hello Vue!'
     }
   })