我在我的元素中使用 Knockout js,我需要向特定标签添加多个 css 类名。下面是我的代码,我有三个不同的类,请建议我如何将它添加到 knockout css 绑定(bind)中。
<img data-bind="attr: { src:ProfileImageSrcName }" class="tabUser profile-Image tabpic" />
最佳答案
你可以是 css
像下面这样绑定(bind)。
var vm = {
profileImageSrcName: ko.observable('http://cumbriaskills.wdfiles.com/local--files/files:images/metro_128_chrome.png'),
isProfilePic: ko.observable(true),
isTab: ko.observable(true),
toggleProfile: function() { vm.isProfilePic(!vm.isProfilePic()); },
toggleTab: function() { vm.isTab(!vm.isTab()); }
};
ko.applyBindings(vm);
.tabUser { width: 100px; height: 100px; object-fit: contain; }
.profile-image { border-radius: 100% }
.tabPic { box-shadow: 0 2px 6px rgba(0,0,0,0.4) }
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<img data-bind="attr: { src: profileImageSrcName },
css: {
'profile-image': isProfilePic, /* single class */
'tabUser tabPic': isTab /* multiple classes */
}" />
<br><br>
<button data-bind="click: toggleProfile">Toggle "profile-image" Class</button><br>
<button data-bind="click: toggleTab">Toggle "tabUser" and "tabPic" Classes</button>
关于css - knockout js CSS 绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44071635/