极客观点
项目管理
HarmonyOS
我有我的 PHP 代码，我确实有一些变量假设
$checked = true;
我正在写这样的东西
<input v-model="subscribed" type="checkbox" <?= ($checked ? 'checked' : '') ?> />
现在在我的 vue js 文件中，如何用这个检查过的数据填充我的模型
subscribed 值为真或假。 （我不打算直接通过 PHP 代码为 js 赋值，我需要在内部/输入中自行设置它，而不是在其他任何地方）
请检查代码片段。
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<label>
<input id='sub' v-model="subscribed" @click="printState" type="checkbox" checked />
Subscription
</label>
</div>
<script>
new Vue({
el: '#app',
data: function() {
return {
subscribed: false,
// subscribed: sub.checked
// ^ this works but i dont want to add everytime id and get its value manually
}
},
created: function() {
var self = this;
setTimeout(function() {
console.log('Checkbox is having its initial value true/checked');
console.log(self.subscribed);
}, 1000)
},
methods: {
printState: function(){
console.log(this.subscribed)
}
}
});
</script>
</body>
你现在可以看到 我必须在数据中添加模型变量 subscribed 但是我还需要提供它的值，如果我提供它的值那么它将覆盖它的实际值（所以为了让它工作我设置它最初从 DOM 元素中取值它自己 { sub.checked sub 是 dom.getelembyid 获取的 dom 元素…} 但我不喜欢这种方式，因为会有更多元素（文本|选择|收音机）等..）
那么有没有什么方法（优雅的方法） subscribed 会自动从它自己的输入中选择它的值。
原文由 Hardik Satasiya 发布，翻译遵循 CC BY-SA 4.0 许可协议
Vue真的不是为了从HTML初始化，但是，一种方法是使用指令init值。这大致基于与 Angular 的ng-init相同的想法：这实质上采用绑定参数，即冒号后的名称（见下文）并将其设置为 Vue 实例上的给定值，然后您可以将其用作：
不过有一些注意事项，首先你仍然需要预先声明你的数据属性，它不会动态注入它们，其次所有东西都被评估为
JavaScript，所以如果你想用它需要的字符串初始化用单引号括起来，最后它不会理解camelCase，所以如果你想设置camelCase数据属性你需要写一个kebab-casecamelCase指令中的转换。这是您在 JSFiddle 中更新的代码段： https ://jsfiddle.net/evnctym1/