@page "/bind"

<p>
    <input @bind="inputValue" />
</p>

<p>
    <input @bind="InputValue" />
</p>

<ul>
    <li><code>inputValue</code>: @inputValue</li>
    <li><code>InputValue</code>: @InputValue</li>
</ul>

@code {
    private string? inputValue;

    private string? InputValue { get; set; }
}

위 처럼 string 변수에 있는 문자 내용을 input 쪽 변수에  바인딩 시킬수도 있고

 

<button class="@inputValue"   type="button"

처럼 버튼의 스타일 또한 변경이 가능하다

<button class="@inputValue"   type="button" disabled="@(_users.Count() >= 5)"

이렇게 유저의 카운트가 0 보다 크면 버튼이 안보이게 처리 또한 가능하다

_users 이 글을 참고해보면 된다

https://3dmpengines.tistory.com/2375

 

만약 데이터가 html 즉 UI 상에 변경된 것이 보이지 않는 상황이 다음 time 관련 코드에서 적용이 안될 수 있는데

 

 

이때는 StateHasChanged(); 함수를 호출해주면 변경된 값이 HTML/UI 상에 보이게 된다

 

 

반응형

+ Recent posts