<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <script type="text/javascript" src="../../js/vue.js"></script> </head> <body> <div id="root"> <button v-model="isChecked" value="yes">Yes</button> <button v-model="isChecked" value="no">No</button> <p>{{ isChecked }}</p> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。 new Vue({ el: "#root", data() { return { isChecked: "", }; }, }); </script> </html> 更改代码点击按钮,值变为按钮的值
时间: 2023-12-01 16:04:25 浏览: 100
可以将 v-model 指令改为 @click 事件和 :value 属性,这样就可以在点击按钮时更新 isChecked 变量的值了。修改后的代码如下:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
<button @click="isChecked='yes'" :value="isChecked">Yes</button>
<button @click="isChecked='no'" :value="isChecked">No</button>
<p>{{ isChecked }}</p>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。
new Vue({
el: "#root",
data() {
return {
isChecked: "",
};
},
});
</script>
</html>
```
这样,当用户点击 Yes 或 No 按钮时,isChecked 变量的值会更新为相应的值。
阅读全文