https://joshcollinsworth.com/_app/immutable/chunks/8bSxBSGs.js

1import"./DsnmJJEf.js";import"./BIgZka8i.js";import{f as t,w as p,y as o,a as e}from"./i4PsxTnU.js";import{h as c}from"./BzzV_2Ex.js";var l=t('<pre class="language-vue"><!></pre>');function g(s){var n=l(),a=p(n);c(a,()=>`<code class="language-vue"><span class="token comment">&lt;!-- ToggleButton.vue --></span>
2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
3  <span class="token keyword">import</span> <span class="token punctuation">&#123;</span> ref<span class="token punctuation">,</span> computed <span class="token punctuation">&#125;</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>
4
5  <span class="token keyword">const</span> isTextShown <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
6
7  <span class="token keyword">const</span> <span class="token function-variable function">toggleIsTextShown</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
8    isTextShown<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token operator">!</span>isTextShown<span class="token punctuation">.</span>value
9  <span class="token punctuation">&#125;</span>
10
11  <span class="token keyword">const</span> buttonText <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
12    isTextShown<span class="token punctuation">.</span>value <span class="token operator">?</span> <span class="token string">'Show less'</span> <span class="token operator">:</span> <span class="token string">'Show more'</span>
13  <span class="token punctuation">)</span><span class="token punctuation">)</span>
14</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
15
16<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>​template</span><span class="token punctuation">></span></span>
17  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
18    Svelte is a JavaScript framework.
19  
20    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>​template</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>isTextShown<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
21      Though actually, if you want to get technical...
22    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
23  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
24
25  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>toggleIsTextShown<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
26    &#123;&#123; buttonText &#125;&#125;
27  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
28<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span></code>`),o(n),e(s,n)}

28export{g as default};