您的位置：首页 > 产品设计 > UI/UE

绑定 value 到 Vue 实例的一个动态属性上

2017-06-30 10:57 676 查看

在我第一次看到这部分的知识的时候有点懵。

具体的懵在vm.a等地方。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定到value</title>
<script src="vue.js"></script>

</head>
<body>
<div id="example">
<div>当选中是为a，未选中时为b。</div>
<input
checked="checked"
id="inp"
type="checkbox"
v-model="toggle"
<!--此处的a、b都是动态的属性，需要在data中声明。-->
v-bind:true-value="a"
v-bind:false-value="b"
>
<label for="inp">{{toggle}}</label>
<p>toggle：{{toggle}}</p>

<div v-on:click="toggleFn">点击判断vm.toggle的值</div>
</div>
<script>
var vm= new Vue({
el:'#example',
data:{
toggle:"b",
//此处声明a、b
a:"aa",
b:"bb"
},
methods: {
//看一下vm.toggle值的变化。
if (vm.toggle === vm.a) {
alert(vm.a)
}else if(vm.toggle===vm.b){
alert(vm.b)
}
}
})
</script>
</body>
</html>

此外，出现在v-model=”“的值，都应在new Vue({data:{}})中声明。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue-js 绑定到vue 绑定动态属性

相关文章推荐

新的分享

章节导航