vueのセットアップでデータをバインドする方法

Vue でセットアップ データをバインドするには 3 つの方法があります: 1. refs: ref 属性を使用して要素参照をセットアップ変数にバインドします。 2. v-model: 入力要素値とセットアップ変数の双方向バインド。カスタム属性: 属性を作成し、値にアクセスするには this.attributeName を使用します。

Vue でセットアップ データをバインドする

Vue では、setup() 関数を使用してロジックとコンポーネントの状態を定義します。このデータをコンポーネント テンプレートにバインドするには、次のメソッドを使用できます: setup() 函数定义逻辑和组件状态。为了将这些数据绑定到组件模板，可以使用以下方法：

1. refs

• 使用 ref 属性将元素或组件引用绑定到 setup 中的变量。
• 访问绑定的元素或组件，使用 this.$refs.<ref-name>。

示例：

<code class="vue"><template>
  <input ref="myInput" />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const inputRef = ref(null);
    return { inputRef };
  },
  mounted() {
    console.log(this.$refs.myInput.value);
  }
};
</script></code>

2. v-model

• 使用 v-model 指令绑定输入元素值到 setup 中的变量。
• v-model 将双向绑定输入值和数据变量。

示例：

<code class="vue"><template>
  <input v-model="inputText" />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const inputText = ref('');
    return { inputText };
  }
};
</script></code>

3. 自定义属性

• 创建自定义属性并将其绑定到 setup 中的变量。
• 访问绑定的值，使用 this.attributeName

1. refs

• ref 属性を使用して要素またはコンポーネントの参照をバインドします。セットアップ変数。

バインドされた要素またはコンポーネントにアクセスするには、this.$refs.<ref-name> を使用します。 🎜🎜🎜例: 🎜🎜

<code class="vue"><template>
  <div :my-value="myValue"></div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const myValue = ref('');
    return { myValue };
  }
};
</script></code>

🎜🎜2. v-model🎜🎜

• v-model ディレクティブを使用して、セットアップ内の変数に入力要素の値をバインドします。 🎜
• v-model は、入力値とデータ変数を双方向でバインドします。 🎜🎜🎜🎜例: 🎜🎜

  <code>console.log(this.myValue); // 输出从setup绑定的值</code>

  🎜🎜3. カスタム プロパティ🎜🎜
  • カスタム プロパティを作成し、セットアップ内の変数にバインドします。 🎜
  • バインドされた値にアクセスするには、this.attributeName を使用します。 🎜🎜🎜🎜例: 🎜🎜rrreeerrreee

以上がvueのセットアップでデータをバインドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。