Vue值绑定

深藏阁楼爱情的钟 2021-10-20 01:12 324阅读 0赞

### 值绑定 ###

*  概述
 *  复选框
 *  单选按钮
 *  选择框的选项

# 概述 #

对于单选按钮，复选框及选择框的选项，`v-model` 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：

<input type="radio" v-model="picked" value="a">
    
    
    <input type="checkbox" v-model="toggle">
    
    
    <select v-model="selected">
      <option value="abc">ABC</option>
    </select>

s  但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 `v-bind` 实现，并且这个属性的值可以不是字符串。

# 复选框 #

<input type="checkbox" v-model="toggle" true-value="yes" false-value="no">

// 当选中时
    vm.toggle === 'yes'
    // 当没有选中时
    vm.toggle === 'no'

>   这里的 `true-value` 和 `false-value` 特性并不会影响输入控件的 `value` 特性，因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交，(比如“yes”或“no”)，请换用单选按钮。

# 单选按钮 #

<input type="radio" v-model="pick" v-bind:value="a">

// 当选中时
    vm.pick === vm.a

# 选择框的选项 #

<select v-model="selected">
        
      <option v-bind:value="{ number: 123 }">123</option>
    </select>

// 当选中时
    typeof vm.selected // => 'object'
    vm.selected.number // => 123

发表评论取消回复

表情：

评论列表（有 0 条评论，324人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue绑定class属性的值

css代码 <style> .red{ color:red; } .thin{ font-weight:200; } .active{ letter-spacing:

青旅半醒/ 2023年07月11日 11:20/ 0 赞/ 25 阅读

相关 vue 获取绑定值

<ul class="product-time clearfix pull-right" style="margin-right: 10px;"> <l

一时失言乱红尘/ 2022年05月26日 08:25/ 0 赞/ 184 阅读

相关 Vue-值绑定

vue 值绑定（1）:v-bind用于绑定属性和数据其缩写为“ : ” 也就是v-bind:id === :id （2）v-model用在表单控件上的，用于实

喜欢ヅ旅行/ 2022年05月17日 03:41/ 0 赞/ 189 阅读

相关 vue15-修改对象值触发vue绑定改变

首先看下面代码： <!DOCTYPE html> <html lang=en> <head> <meta charset="

Myth丶恋晨/ 2022年05月10日 01:42/ 0 赞/ 161 阅读

相关 vue14-修改数组值触发vue绑定值改变

首先看下面这段代码： <!DOCTYPE html> <html lang=en> <head> <meta charset

比眉伴天荒/ 2022年05月10日 01:42/ 0 赞/ 186 阅读

相关 VUE 样式绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接

蔚落/ 2022年03月27日 13:19/ 0 赞/ 386 阅读

相关 Vue绑定属性绑定Class 绑定style

vue是如何绑定属性和class以及style的下面我将会插入一段代码，本人在代码里做了相当详细的注释。 <template> <!-- v

待我称王封你为后i/ 2022年03月25日 09:36/ 0 赞/ 467 阅读

相关 Vue值绑定

值绑定概述复选框单选按钮选择框的选项概述对于单选按钮，复选框及选择框的选项，`v-model` 绑定的值通常是静态字符串

深藏阁楼爱情的钟/ 2021年10月20日 01:12/ 0 赞/ 325 阅读

相关 Vue-样式绑定

绑定class属性 v-bind:class="{样式名称：变量}" <!DOCTYPE html> <html> <head>

水深无声/ 2021年09月09日 08:08/ 0 赞/ 483 阅读

相关 Vue - 样式绑定

实现功能：点击一次字体变颜色，再点一次字体恢复默认颜色一. class 选择器的对象绑定 1. 对象方式 2. 数组方式

た入场券/ 2021年07月25日 15:00/ 0 赞/ 523 阅读