main.js
/* jshint ignore:start */
import Vue from "vue"
import App from "./App.vue"
new Vue({
el: "#app",
render: h => h(App)
})
App.vue
<template>
<div>
<h2>Form Inputs</h2>
<input v-model="name">
<p>{{ name }}</p>
</div>
</template>
<script>
export default {
data() {
return {
name: ""
}
}
}
</script>
<style></style>
Для того, что бы тег "p" менялся только тогда когда мы убираем курсор с input, проставим к v-model параметр "lazy", вот так <input v-model.lazy="name">
Вот так можно организовать переносы в textarea с привязкой к тегу p.
App.vue
<template>
<div>
<h2>Form Inputs</h2>
<textarea v-model="name"></textarea>
<p>{{ name }}</p>
</div>
</template>
<script>
export default {
data() {
return {
name: ""
}
}
}
</script>
<style scoped>
textarea {
width: 400px;
height: 150px;
}
p {
white-space: pre;
}
</style>
Разберем на примере как во Vue работать и отслеживать chekbox.
App.vue
<template>
<div>
<h2>Form Inputs</h2>
<input type="checkbox" value="vk" v-model="social"> ВКонтакте
<input type="checkbox" value="instagram" v-model="social"> Instagram
<input type="checkbox" value="facebook" v-model="social"> FaceBook
<hr>
<ul>
<li v-for="s in social">{{ s }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
social: []
}
}
}
</script>
<style scoped></style>
Если нужно, что бы при загрузке страницы уже какой то checkbox был установлен, то добавляем в массив social этот элемент, вот так - social: ["vk"].
App.vue
<template>
<div>
<h2>Form Inputs</h2>
<input type="radio" value="vk" v-model="social"> ВКонтакте
<input type="radio" value="instagram" v-model="social"> Instagram
<input type="radio" value="facebook" v-model="social"> FaceBook
<hr>
<p>{{ social }}</p>
</div>
</template>
<script>
export default {
data() {
return {
social: ""
}
}
}
</script>
<style scoped></style>
App.vue
<template>
<div>
<h2>Form Inputs</h2>
<select v-model="social">
<option v-for="s in socialList">{{ s }}</option>
</select>
<hr>
<p>{{ social }}</p>
</div>
</template>
<script>
export default {
data() {
return {
social: "instagram",
socialList: ["vk", "instagram", "facebook"]
}
}
}
</script>
<style scoped></style>
Рассмотрим пример, где нам нужно в input вводить только цифры.
App.vue
<template>
<div>
<h2>Form Inputs</h2>
<input type="text" v-model.number="age">
<hr>
<p>{{ age }}</p>
</div>
</template>
<script>
export default {
data() {
return {
age: 20
}
},
watch: {
age(value) {
console.log(value)
console.log(typeof(value))
}
}
}
</script>
<style scoped></style>
Рассмотрим пример создания своего переключателя и осуществим это на примере передачи данных между компонентами.
main.js
/* jshint ignore:start */
import Vue from "vue"
import App from "./App.vue"
new Vue({
el: "#app",
render: h => h(App)
})
App.vue
<template>
<div>
<h2>Form Inputs</h2>
<on-off
:switches="switches"
@newValue="switches = $event"
></on-off>
<h2 v-if="switches">Компонент активен</h2>
<h2 v-else>Компонент не активен</h2>
</div>
</template>
<script>
import OnOff from "./on-off.vue"
export default {
components: {
OnOff
},
data() {
return {
switches: false
}
}
}
</script>
<style scoped></style>
on-off.vue
<template>
<div>
<button
class="on"
:class="{'active': switches}"
@click="switchClick(true)"
>On</button>
<button
class="off"
:class="{'active': !switches}"
@click="switchClick(false)"
>Off</button>
</div>
</template>
<script>
export default {
props: {
switches: { type: Boolean },
},
data() {
return {
}
},
methods: {
switchClick(newValue){
this.$emit("newValue", newValue)
}
}
}
</script>
<style scoped>
button {
cursor: pointer;
}
.on {
background-color: aliceblue;
}
.off {
background-color: aliceblue;
}
.on.active {
background-color: green;
}
.off.active {
background-color: red;
}
</style>