Knockout visible binding method

Simple binding

So let's first define a ViewModel

    var AppViewModel = {
        shouldShowMessage: ko.observable(true)  /// div is visible & NBSP; when initialized;      
    };

    AppViewModel.shouldShowMessage = ko.observable(false);   /// now hidden
    ko.applyBindings( AppViewModel);

Moreover, ko. ApplyBindins is used to activate Knockout.
Then define a UI interface element

<div data-bind="visible:shouldShowMessage">
    You will see this message only when "shouldShowMessage" holds a true value.
</div>

After running, the div is still displayed when it is initialized, but then it is reassigned to false, causing the div to be hidden.
Parameters:
When the parameter is set to a false value (for example, Boolean false, numeric value 0, or null, or undefined), the binding sets the element's style.display value to none, hiding the element. It takes precedence over any display style that you define in your CSS.
When the parameter is set to a true value (for example, Boolean true, or a non-null object or array), the binding deletes the element's style.display value to make the element visible. Then your custom display style in CSS will automatically take effect.
If the parameter is monitoring the observable, the visible state of the element will change according to the parameter value; if not, the visible state of the element will be set only once and will not be updated later.
Use functions or expressions to control the visibility of elements
You can also use JavaScript functions or expressions as arguments. In this case, the result of the function or expression will determine whether to show/hide the element. Such as:

<script type="text/javascript">
    var AppViewModel = {
        shouldShowMessage: ko.observable(true),   //Div is visible when/is initialized
        myValues: ko.observableArray([])         
    };

    AppViewModel.shouldShowMessage = ko.observable(false);   /// now hidden
    AppViewModel.myValues.push("some value");                   /// adds an item to the myValues array
    ko.applyBindings( AppViewModel);
</script>

A property value of myValues was added to the ViewModel
You also add an item to the array of myValues
And an element is bound to the page UI

<div data-bind="visible: myValues().length > 0">    
　　You will see this message only when 'myValues' has at least one member.
</div>

So after adding the "some value" element, myValues(). Length> 0 is true
And that div will display.