Front end framework Vue ---- calculation properties

laufing 2022-01-15 02:24:01

demand

 Insert picture description here
Pictured , The required input in the input box is below Display dynamically

Ideas :
Data driven page template rendering
data change , The page is re rendered

Interpolation method

Interpolation method , Realize dynamic display

<div id="container">
<input type="text" name='username' placeholder=" enter one user name " v-model="username"><br>
<input type="text" name='age' placeholder=" Enter the age " v-model="age"><br>
<span>{
{ username }}--{
{ age }}</span>
</div>
<script> Vue.config.productionTip = false new Vue({
 el: "#container", data: {
 username: "", age: "", }, }) </script>

Function mode

Function mode , Realize dynamic display

<div id="container">
<input type="text" name='username' placeholder=" enter one user name " v-model="username"><br>
<input type="text" name='age' placeholder=" Enter the age " v-model="age"><br>
<span>{
{ func() }}</span>
</div>
<script> Vue.config.productionTip = false new Vue({
 el: "#container", data: {
 username: "", age: "", }, methods: {
 func(){
 return this.username + "--" + this.age }, }, }) </script>

Compute properties


thank
Similar articles

2022-01-15

2022-01-15