[Mise] Update a count state value with the x-on event listener directive in Alpine JS

2021-03-07 00:30

阅读：645

标签：style most -- lis display te pro directive val str

In this lesson, we define a "count" state value with the x-data directive provided by Alpine JS. This defines a new scoped component, which can have access to this state.

We then display the "count" value in our HTML with the x-text directive, which updates an element‘s innerText value.

We also hook up buttons with click event listeners with x-on:click, which allows us to modify the count value as desired.


div x-data="{count: 0}">
  button @click="count--">-1button>
  button @click="count++">+1button>
  
  p>The current count is strong x-text="count">strong>.p>
  button @click="count = 0">resetbutton>
div>

You are not able to access the state outside the outmost div block

[Mise] Update a count state value with the x-on event listener directive in Alpine JS

标签：style most -- lis display te pro directive val str

原文地址：https://www.cnblogs.com/Answer1215/p/12890619.html

上一篇：[Mise] Toggle visibility and styles based on state with `x-show` and `x-bind` in Alpine JS

下一篇：解决centos安装不上apache:No match for argument: httpd

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：[Mise] Update a count state value with the x-on event listener directive in Alpine JS
文章链接：http://soscw.com/index.php/essay/61105.html

亲，登录后才可以留言！

[Mise] Update a count state value with the x-on event listener directive in Alpine JS

评论

热门文章

推荐文章

最新文章

置顶文章