vue里面的el只能绑定id吗_VUE是如何进行数据的绑定

vue的核心特性之一是双向的数据绑定,关于如何进行数据的绑定,下面我们结合具体的例子来作讲解

2.3.1. 数据绑定的语法

2.3.1.1. 文本插值

直接填坑,进行数据的绑定v-once:只绑定一次,首次赋值后更改vm实例的属性值不会引起dom元素绑定的值的变化

{{message}}

{{message}}

var dataModel = {

message: 'hello world!'

}

var vm= new Vue({

el:'#app',

data:dataModel

})

2.3.1.2. html属性的绑定

v-bind: 为html标签绑定属性值

{{message}}

2.3.1.3. 绑定表达式

一段绑定表达式可以由一个简单的js表达式和可选的一个或多个过滤器组成

{{ message + "----" + name }}

{{ bool ? 1 : 0 }}

{{ num * 2 }}

//创建Vue对象

var app =new Vue ({

el:'#app',//将Vue对象绑定到指定的选择器

data:{

message: 'hello world ',

name:'高辉',

bool: true,

num:10

}

})

2.3.2. 表单控件

vue中使用v-model指令对表单元素进行双向的数据绑定

2.3.2.1. text

绑定的值就是value值

{{message}}

var dataModel = {

message: 'hello world!'

}

var vm= new Vue({

el:'#app',

data:dataModel

})

2.3.2.2. textarea

绑定的值也是value值

multiline message is

{{message}}

var dataModel = {

message: 'hello world!'

}

var vm= new Vue({

el:'#app',

data:dataModel

})

2.3.2.3. radio

绑定的值就是选中单选框的value值

男

女

{{gender}}

var dataModel = {

message: 'hello world!',

gender:"male"

}

var vm= new Vue({

el:'#app',

data:dataModel

})

2.3.2.4. checkbox - 1

单选:　绑定的值是bool值,决定是否选中

多选: 绑定的值是一个数组类型,value值为数组里面的元素

{{ message1 }}

{{message2}}

Jack

---

rose

---

mack

---

july

---

{{checked}}

var dataModel = {

message1: '单选',

message2: '多选',

checked1: false,

checked2:[1,2]

}

var vm = new Vue({

el: '#app',

data: dataModel

})

2.3.2.5. checkedbox - 2

{{ picked }}

---

{{ toggle }}

---

ABC

---

var dataModel = {

picked: '',

toggle: true,

selected: 'abc',

a: '1',

b: '2'

}

var em = new Vue({

el: '#app',

data: dataModel

})

2.3.2.6. select

单选: 根据option的value值设置选中

多选: 根据value值的数组设置选中

单选

A

B

C

单选选中项是: {{selected}}

多选

A

B

C

多选选中项是:　{{selecteds}}

动态的select--循环渲染-设置单选

{{option.text}}

多选选中项是:　{{selecteds}}

var dataModel = {

message1: '单选',

message2: '多选',

selected: 'B',

selecteds: ['A', 'B'],

options: [{

text: 'One',

value: 'A'

}, {

text: 'Two',

value: 'B'

}, {

text: 'Three',

value: 'C'

}]

}

var vm = new Vue({

el: '#app',

data: dataModel

})

2.3.2.7. 绑定value

对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符串(对于勾选框是逻辑值)

复选框

选择列表

ABC

123

var dataModel = {

picked: 'a',

toggle: true,

selected: 'abc',

a: true,

b: false,

selected1: {

number: 123

}

}

var vm = new Vue({

el: '#app',

data: dataModel

})

// 选中

console.log(vm.toggle === vm.a) //true

// 取消选中

console.log(vm.toggle === vm.b) //false

// 选择列表的设置

console.log(vm.selected1)

console.log(vm.selected1.number)

2.3.2.8. 修饰符

2.3.2.8.1. .lazy

在默认情况下， v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分)但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

{{message}}

2.3.2.8.2. .number

如果想自动将用户的输入值转为 Number 类型如果原值的转换结果为 NaN 则返回原值

{{message}}

var dataModel = {

message: 'hello world!'

}

var vm= new Vue({

el:'#app',

data:dataModel

})

2.3.2.8.3. .trim

过滤用户输入的首尾空格

{{message}}

var dataModel = {

message: ''

}

var vm= new Vue({

el:'#app',

data:dataModel

})