vue 中表单 [v-bind:true-value="a" v-bind:false-value="b"] 的用法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 中表单 [v-bind:true-value="a" v-bind:false-value="b"] 的用法相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <style> .main{ width:300px; height:300px; border:1px solid #ccc; } .s1{ border:1px solid #0f0; } .s2{ border:1px solid #d00; } [v-cloak]{ display:none; } </style> </head> <body> <script src="http://cdn.bootcss.com/vue/1.0.24-csp/vue.min.js"></script> <div class="app" v-cloak> <ul> <li> <input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b" > <span>{{ toggle }}</span> <div class="main" :class="[toggle === ‘a‘ ? classA : classB]" :style="{color:activeColor}"> dd</div> </li> </ul> </div> <script> var vm = new Vue({ el:".app", data:{ classA:‘s1‘, classB:‘s2‘, a:‘a‘, b:‘b‘, toggle:‘‘, activeColor: ‘#f0f‘, }, methods:{ }, ready:function(){ } }) </script> </body> </html>
以上是关于vue 中表单 [v-bind:true-value="a" v-bind:false-value="b"] 的用法的主要内容，如果未能解决你的问题，请参考以下文章