vue urlencode

// 使用 Vue.js 进行 URL 编码的示例代码

<template>
  <div>
    <input v-model="inputText" placeholder="请输入要编码的文本" />
    <button @click="encodeUrl">编码</button>
    <p>编码后的结果: {{ encodedText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
      encodedText: ''
    };
  },
  methods: {
    encodeUrl() {
      // 使用 encodeURIComponent 对输入的文本进行编码
      this.encodedText = encodeURIComponent(this.inputText);
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>

解释说明：

1. 模板部分 (<template>):

   • 包含一个输入框 (<input>) 绑定到 inputText 数据属性，用户可以在此输入需要编码的文本。
   • 一个按钮 (<button>) 触发 encodeUrl 方法，用于执行编码操作。
   • 显示编码后的结果 (<p>)，绑定到 encodedText 数据属性。

2. 脚本部分 (<script>):

   • data() 函数返回两个数据属性：inputText 和 encodedText。前者用于存储用户输入的文本，后者用于存储编码后的结果。
   • methods 中定义了 encodeUrl 方法，该方法使用 JavaScript 内置的 encodeURIComponent 函数对输入的文本进行 URL 编码，并将结果赋值给 encodedText。

3. 样式部分 (<style scoped>):

   • 可以根据需要自定义样式，这里没有具体样式内容。

这个示例展示了如何在 Vue.js 中实现简单的 URL 编码功能。