vue指令（2）

• v-bind

用于属性和样式的绑定。

（1）缩写

（2）绑定属性

    vue 多属性绑定
    

---

以下：在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

（3）绑定HTML Class（可以方便动态地切换 class）
栗子1：数组语法

    
栗子1
    

栗子2：对象语法

    
栗子2
    

注意：用在组件上，当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。

（4）绑定内联样式
栗子1：数组语法

    
{{message}}

栗子2：对象语法

    
{{message}}

v-bind支持的修饰符：

v-bind支持的修饰符

• v-model

实现数据的双向绑定，v-model 指令只能作用于 、、<select>等表单元素上。</p> </blockquote> <p>栗子1：文本输入</p> <pre><code><div id="app"> <p>单行文本：</p> <input v-model="message1" placeholder="单行文本"> <p>当前输入: {{ message1}}</p> <p>多行文本：</p> <textarea v-model="message2" placeholder="多行文本">

当前输入: {{ message2}}

栗子2：复选框

    
单个复选框：
    
    {{ checked }}

    
多个复选框：
    
    
    iPhone
    
    小米
    
    华为
    选择的值: {{ checkedNames }}

栗子3：单选按钮

    
    mingtern
    

    
    baidu
    

    选中值为:{{ choosed }}

 

栗子4：select列表

    
单选列表：
    
        请选择
        A
        B
        C
    
    选择的值是: {{ single }}
    
    
多选列表：
    
        A
        B
        C
    
    选择的值是: {{ multiple }}    
    
    
动态列表：
    
        请选择
        
        {{ item.text }}
        
    
    选择的值是: {{ dynamic }}    

 

v-model支持的修饰符：

v-model支持的修饰符

• v-cloak

该指令会在关联元素的所有vuejs变量编译完成后才正常显示。与[v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

  {{ message }}

• v-once

使用 v-once 指令，表示只对关联元素或组件进行一次渲染，随后会被当做静态内容跳过，不会再次渲染。

    
{{title}}
    
{{content}}

• v-pre

vue 实例化时会遍历页面所有节点，如果想跳过某些节点，可以在该节点中使用 v-pre 指令，编译器会自动忽略该节点和其子节点。

    
三元运算表达式
    {{ ok ? 'YES' : 'NO' }}：{{ ok ? 'YES' : 'NO' }}

运行结果