Vue实现字符串首字母大写、翻转字符串、获取用户选定的文本
目录
- Vue2实现字符串首字母大写
- Vue3实现字符串首字母大写
- Vue2实现翻转字符串
- Vue3实现翻转字符串
- Vue2获取用户选定的文本
- Vue3获取用户选定的文本
Vue2实现字符串首字母大写
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>实现字符串首字母大写title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="app">
<input v-model="inputText" placeholder="输入一个字符串" />
<p>{{ capitalizedText }}p>
div>
<script>
new Vue({
el: '#app',
data() {
return {
inputText: ''
}
},
computed: {
capitalizedText() {
if (this.inputText) {
return this.inputText.charAt(0).toUpperCase() + this.inputText.slice(1)
} else {
return ''
}
}
}
})
script>
body>
html>
在这个Vue 2的案例中，我们使用了CDN引入Vue 2的库。在HTML文件中，我们有一个包含一个输入框和一个段落元素的 在JavaScript部分，我们创建了一个Vue实例，并将其挂载到id为 然后，我们定义了一个计算属性 当用户在输入框中输入一个字符串时，计算属性会实时更新并将首字母大写的结果显示在页面上。 在这个Vue 3的例子中，我们使用了Composition API和 在 然后，我们使用 最后，我们从 以下是Vue 2和Vue 3分别实现翻转字符串的案例，包括完整的HTML代码、案例代码思路和详细描述。 在这个Vue 2的案例中，我们同样使用了CDN引入Vue 2的库。在HTML文件中，我们有一个包含一个输入框和一个段落元素的 在JavaScript部分，我们创建了一个Vue实例，并将其挂载到id为 然后，我们定义了一个计算属性 当用户在输入框中输入一个字符串时，计算属性会实时更新并将翻转后的结果显示在页面上。 在这个Vue 3的案例中，我们使用了Vue的单文件组件方式来实现。在模板中，我们有一个包含一个输入框和一个段落元素的 在JavaScript部分，我们使用了Vue 3的Composition API。通过 然后，我们在 在计算属性中，我们通过 最后，我们通过 当用户在输入框中输入一个字符串时，计算属性会实时更新并将翻转后的结果显示在页面上。 在这个Vue 2的案例中，我们使用了CDN引入Vue 2的库。在HTML文件中，我们有一个包含两个 第一个 第二个app。
app的元素上。在Vue实例中，我们定义了一个data属性inputText，用于存储用户输入的字符串。capitalizedText，它会根据用户输入的字符串生成首字母大写的结果。在计算属性中，我们通过v-model指令将输入框的值绑定到inputText上。Vue3实现字符串首字母大写
<template>
<div>
<input v-model="inputText" placeholder="输入一个字符串" />
<p>{{ capitalizedText }}p>
div>
template>
<script>
import { ref, computed } from 'vue'
export default {
setup() {
const inputText = ref('')
const capitalizedText = computed(() => {
if (inputText.value) {
return inputText.value.charAt(0).toUpperCase() + inputText.value.slice(1)
} else {
return ''
}
})
return {
inputText,
capitalizedText
}
}
}
script>
setup()函数。我们从vue包中导入了ref和computed函数。setup()函数内部，我们使用ref()创建了一个可响应的引用，用于存储inputText变量的值。computed()函数定义了一个计算属性capitalizedText。在计算属性内部，我们使用.value属性访问inputText的值。其余逻辑与Vue 2的例子相同。setup()函数中返回inputText和capitalizedText，以便在模板中使用。Vue2实现翻转字符串
DOCTYPE html>
<html lang="en">
<head>
<meta ch****t="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue2实现翻转字符串title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="app">
<input v-model="inputText" placeholder="输入一个字符串" />
<p>{{ reversedText }}p>
div>
<script>
new Vue({
el: '#app',
data() {
return {
inputText: ''
}
},
computed: {
reversedText() {
if (this.inputText) {
return this.inputText.split('').reverse().join('')
} else {
return ''
}
}
}
})
script>
body>
html>
app。
app的元素上。在Vue实例中，我们定义了一个data属性inputText，用于存储用户输入的字符串。reversedText，它会将用户输入的字符串翻转后返回。在计算属性中，我们通过v-model指令将输入框的值绑定到inputText上。Vue3实现翻转字符串
<template>
<div>
<input v-model="inputText" placeholder="输入一个字符串" />
<p>{{ reversedText }}p>
div>
template>
<script>
import { ref, computed } from 'vue'
export default {
setup() {
const inputText = ref('')
const reversedText = computed(() => {
if (inputText.value) {
return inputText.value.split('').reverse().join('')
} else {
return ''
}
})
return {
inputText,
reversedText
}
}
}
script>
import { ref, computed } from 'vue';这行代码引入了需要的函数。setup()函数中定义了响应式的inputText变量和计算属性reversedText。inputText.value获取用户输入的字符串，并使用split()方法将字符串转换成数组，然后使用reverse()方法将数组翻转，最后使用join()方法将数组转换成字符串。如果用户没有输入字符串，则返回空字符串。export default将组件导出。Vue2获取用户选定的文本
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue2获取用户选定的文本title>
<script src="https://unpkg.com/[email protected]/dist/vue.js">script>
head>
<body>
<div id="app">
<div>
<span>选中文字：span>
<span>{{ selectedText }}span>
div>
<div>
<textarea v-model="text" @mouseup="getSelectedText">textarea>
div>
div>
<script>
new Vue({
el: '#app',
data: {
text: '',
selectedText: ''
},
methods: {
getSelectedText() {
this.selectedText = window.getSelection().toString()
}
}
})
script>
body>
html>
app。
selectedText数据绑定到文本节点上。