svelte - 2. 数据绑定 / 基本组件

编程基础 • 2025-01-12 11:27 • 阅读 4

文章目录

1、input 输入框
2、数字输入框
3、checkbox 复选框
4、radio
5、select选择框
- （1）单选
- （2）多选
6、媒体标签 video
7、尺寸获取
8、this

1、input 输入框

（1）input

在这里插入图片描述
bind:value 双向绑定值

<input bind:value={
   name}>

（2）textarea

<script>
	let comment = '';
</script>
<main>
	<textarea
		name="备注"
		id="comment"
		cols="30"
		rows="3"
		bind:value={
   comment}
		placeholder="placeholder内容"></textarea>
	<h1>
		双向绑定看看： {
   comment}
	</h1>
</main>

（3）contenteditable=“true”

contenteditable="true"可以让一个div可输入

<script>
	let htmlContent = '<h1>Hello, contenteditable</h1>' // 设置div默认值，用 innerHtml 注入
</script>
<main>
	<div contenteditable="true"  bind:innerHTML={htmlContent}></div>
</main>
<style>
	[contenteditable] {
		border: 1px solid #ccc;
		padding: 4px;
		border-radius: 4px;
	}
</style>

2、数字输入框

在这里插入图片描述
type=number：数组输入框
bind:value={xxx}: 绑定值（xxx是数字）

<script>
	let a = 1;
</script>
<input type=number bind:value={
   a} min=0 max=10>
<input type=range bind:value={
   a} min=0 max=10>

3、checkbox 复选框

type=checkbox: 复选框；
bind:checked={xxx}：勾选复选框（xxx是boolean类型）

<script>
	let yes = false;
</script>
<input type=checkbox bind:checked={
   yes}>

4、radio

https://www.svelte.cn/tutorial/group-inputs
type=radio bind:group={xxx}

<input type=radio bind:group={
   scoops} value={
   1}>

5、select选择框

（1）单选

<script>
  let subjects = ['语文', '数学', '外语', '政治', '物理', '化学']
  let result;
</script>
<main>
  <select
    name=""
    id=""
    bind:value={
   result}
  >
    {
   #each subjects as subject}
      <option value="{subject}">{
   subject}</option>
    {
   /each}
  </select>
</main>

（2）多选

在这里插入图片描述
关键点：multiple、绑定数组变量、按 shift + 鼠标选择多个内容

<script>
  let subjects = ['语文', '数学', '外语', '政治', '物理', '化学']
  let result = []; // 绑定数组类型
</script>
<main>
  <select
    multiple
    name="sub"
    id=""
    bind:value={
   result}
  >
    {
   #each subjects as subject}
      <option value="{subject}">{
   subject}</option>
    {
   /each}
  </select>
	<p>喜欢的学科：{
   result}</p>
</main>

6、媒体标签 video

感觉跟原生的区别不大
https://www.svelte.cn/tutorial/media-elements

<video
	poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
	src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
	on:mousemove={
   handleMousemove}
	on:mousedown={
   handleMousedown}
	bind:currentTime={
   time}
	bind:duration
	bind:paused
></video>

7、尺寸获取

每个块级标签都可以对 clientWidth、clientHeight、offsetWidth 以及 offsetHeight 属性进行绑定（只读）

<div bind:clientWidth={
   w} bind:clientHeight={
   h}>
	<span style="font-size: {size}px">{
   text}</span>
</div>

8、this

感觉是跟 vue 差不多的，官网的示例是在 onMount 生命周期设置 canvas 的

<canvas
	bind:this={
   canvas}
	width={
   32}
	height={
   32}
></canvas>