您的位置：首页 > Web前端 > Vue.js

vue(计算属性 表单控件)

2019-03-16 18:04 537 查看

一、计算属性
在项目开发中，我们展示的数据往往需要经过一些处理， Vue.js中提供了computed属性，来避免在模板中加入过重的业务逻辑，保证模板的结构清晰和可维护性。
计算属性中，默认只有getter属性，需要时可以使用setter
二、表单控件
Vue.js中提供v-model的指令对表单元素进行双向数据绑定，在修改表单元素时，实例中对应的属性值也会同时更新，反之亦然。
绑定value:表单控件的值可以绑定在Vue实例动态属性上，用v-bind实现。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src = "vue.js"></script>
</head>
<body>
<div id="app">
{{ city }} <br>
{{ school }} <br>
{{ city + school }} <br>
{{ address }}
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
city:"禹城",
school:"大禹学院"
},
computed:{
address:function(){
return this.city + this.school;
}
}
})
</script>
<div id="app1">
<input type="text" v-model = "price">
<input type="text" v-model = "count">
<input type="text" v-model = "total">
</div>
<script>
var vm1 = new Vue({
el:"#app1",
data:{
price:20,
count:3
},
computed:{
// total:function(){
//     return this.price * this.count;
// }
total:{
get:function(){
return this.price * this.count;
},
set:function(newValue){
this.count = newValue / this.price;
}
}
}
})
</script>
<div id="app2">
<!-- radio -->
<input type="radio" value = "男" v-model = "sex">男
<input type="radio" value = "女" v-model = "sex">女
<input type="text" v-model = "sex">
</div>
<script>
var vm2 = new Vue({
el:"#app2",
data:{
sex:"男"
}
})
</script>
<div id="app3">
<input type="checkbox" v-model = "checked">
<!-- <input type="text" v-model = "checked"> -->
<span>{{checked}}</span>
</div>
<script>
var vm3 = new Vue({
el:"#app3",
data:{
checked:false
},
updated:function(){
console.log(vm3.checked,typeof(vm3.checked));
}
})
</script>
<div id="app4">
<input type="checkbox" value = "1" v-model = "multiCheck">10
<input type="checkbox" value = "2" v-model = "multiCheck">20
<input type="checkbox" value = "3" v-model = "multiCheck">30
<input type="checkbox" value = "4" v-model = "multiCheck">40
<span>{{multiCheck}}</span>
</div>
<script>
var vm4 = new Vue({
el:"#app4",
data:{
multiCheck:[1,3]
}
})
</script>
<div id="app5">
<select v-model = "selected">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
</select>
<input type="text" v-model = "selected">
</div>
<script>
var vm5 = new Vue({
el:"#app5",
data:{
selected:"b"
}
})
</script>
<div id="app6">
<select v-model = "multiSelect" multiple>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
</select>
<span>{{multiSelect}}</span>
</div>
<script>
var vm6 = new Vue({
el:"#app6",
data:{
multiSelect:["a","c"]
}
})
</script>
<div id="app7">
<input type="radio" v-bind:value = "a" v-model= "checked"> <!-- radio绑定value,选中状态时vm7.checked = vm7.a -->
<span>{{a}}--{{checked}}</span>
</div>
<script>
var vm7 = new Vue({
el:"#app7",
data:{
a : 0,
checked : 1
}
})
</script>
<div id="app8">
<input type="checkbox" v-bind:true-value = "a" v-bind:false-value = "b" v-model = "checked"> <!-- checkbox当选中状态时，vm8.checked = vm8.a 未选中状态时，vm8.checked = vm8.b -->
<span>a:{{a}}--b:{{b}}--checked:{{checked}}</span>
</div>
<script>
var vm8 = new Vue({
el:"#app8",
data:{
checked:3,
a:1,
b:2
}
})
</script>
<div id="app9">
<select v-model = "selected">        <!-- selected，选中状态时，vm9.selected = 所选option绑定的value值 -->
<option v-bind:value="aaa">111</option>
<option v-bind:value="{num:2}">222</option>
<option v-bind:value="{num:3}">333</option>
</select>
<span>selected:{{selected}}</span>
</div>
<script>
var vm9 = new Vue({
el:"#app9",
data:{
aaa:"aaa",
selected:""
}
})
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航