What are the several methods of vue data binding?

Vue data binding method: 1. Use double curly brackets "{{}}" to give data to the page; 2. Use "v-model", "v-text", "v-html" ", "v-bind" and other instructions; 3. Add ":" before the label attribute to bind; 4. Use "${}" before data to splice the string.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Several ways for Vue to bind data

1. Use double curly brackets '{<strong><span style="font-size: 16px;">{}}</span></strong>' Give the data to the page

<template>

  <div class="mainBody">
      <h3 id="nbsp-msg-nbsp">{{ msg }}</h3>
  </div>
</template>
<script>
export default {
   data(){
     return{
       msg:&#39;月落乌啼霜满天&#39;,
     }
}
}
</script>

2. Use the vue command

<template>

  <div class="mainBody">
       <Input v-model="msg"/>
  </div>
</template>
<script>
export default {
   data(){
     return{
       msg:&#39;月落乌啼霜满天&#39;
     }
}
}
</script>

The v-model is used here to bind the value of the input box to msg It can also be v-text v-html v-bind, etc.

3. Add ':' before the label attribute to bind

<template>

  <div class="mainBody">
    <CellGroup>
      <Cell :title="msg"/>
    </CellGroup>

  </div>
</template>
<script>
export default {
   data(){
     return{
       msg:&#39;月落乌啼霜满天&#39;,
     }
}
}
</script>

Bind the value of msg to the title of the cell through:title. If you forget to add ':' in front of the title attribute If so, the page display will become like this:

The value given to title is not the variable msg in data() but the string "msg"

4. Use `${}` to splice strings before data

<template>
<!-- 有时我们需要给要绑定的值拼接字符串，比如需要控制样式，拼接字符串时，那我们就需要这样写`${}`， -->
  <div class="mainBody">
    <CellGroup>
      <Cell :title="msg"/>
       <!-- 将‘江枫渔火对愁眠’单元格 的背景色绑定到 color:&#39;aqua&#39; -->
      <Cell title=&#39;江枫渔火对愁眠&#39; :style="`background-color: ${color}`"/>
       <!-- 将‘江枫渔火对愁眠’拼接在msg：&#39;月落乌啼霜满天&#39;后-->
      <Cell :title="`${msg}，江枫渔火对愁眠`" />
    </CellGroup>

  </div>
</template>
<script>
export default {
   data(){
     return{
       msg:&#39;月落乌啼霜满天&#39;,
       color:&#39;aqua&#39;
     }
}
}
</script>

[Related recommendations: "vue.js tutorial 》】

The above is the detailed content of What are the several methods of vue data binding?. For more information, please follow other related articles on the PHP Chinese website!