这篇博客展示了如何使用Vue.js实现一个简单的用户交互功能：只有当用户勾选同意协议后，‘下一步’按钮才会启用。通过v-model双向绑定和动态设置按钮的disabled属性，确保了用户必须同意条款才能继续操作。示例代码中，当message变量为true时，按钮变为可点击，否则保持禁用状态。
简单化操作 没有样式 实现下原理即可 同意协议 按钮才能点击 不同意按钮则失效
disabled 禁止点击按钮/表单
动态绑定disabled 当message为true时 按钮才可点击 为fasle时 失效
<body>
<div id = "app">
<label for="nan">
<input type="checkbox" value="同意" v-model="message"/>同意协议
</label>
<!-- 方便看到v-mode和input表单同步的 -->
<h3>你的选择是{{message}}</h3>
<button type="button" :disabled = !message>下一步</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:false //默认false
},
methods:{
}
})
</script>
</body>
797
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
