{{val}} {{val}} {{val}} -model="val"> Tom Jack Alex {{val}} btn btn2 {{say}} {{fullName}} >var age=12var obj={name:name, //这里的name是变量age,//age:age 缩写height:"180"}//单选。vue2-|vue2- v-model表单双向绑定、v-on事件绑定简写@、computed与methods。" />

vue2-|vue2- v-model表单双向绑定、v-on事件绑定简写@、computed与methods

2021-11-16

```css - 锐客网 ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> {{val}} {{val}} {{val}} -model="val"> {{val}}


	


{{say}}

{{fullName}}

		>
var age=12
var obj={
name:name, //这里的name是变量
age,//age:age 缩写
height:"180"}//单选框
var app = new Vue({
el:"#app",	
data:{
message:"vue",
val:""
}
})
//复选框（多个）
var app2 = new Vue({
el:"#app2",
data:{
val:[]
}
})
//复选框（单个）
var app3 = new Vue({
el:'#app3',
data:{
val:""
//结果显示true（选中），false（没选中）
}
})
//下拉选择框,绑定事件
var app4 = new Vue({
el:'#app4',
data:{
val:""
},
//时间绑定卸载methods里面
methods:{
fn:function(){
alert(this.val) //要写this.val要不然不知道是哪里的val
}
}
})
//
var app5 = new Vue({
el:"#app5",
data:{
val:"",
box:"hello",
firstName:"Foo",
lastName:"Bar",
fullName:"Foo Bar"
},
methods:{
btn2(){
console.log(typeof(this.val))
}
},
computed:{
say:function(){
return this.box.split("").reverse().join("-")
}
},
watch:{
firstName:function(c){
this.fullName = c + ' ' + this.lastName
},
lastName:function(c){
this.fullName = this.firstName + ' ' + c
}
}})