鍍金池/ 問答/HTML/ vue在value里面插入插值會報錯？

vue在value里面插入插值會報錯？

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>vue</title>

</head>

<body>
  <div id="app">
    <table>
      <thead>
        <th>學(xué)科</th>
        <th>分?jǐn)?shù)</th>
      </thead>
      <tbody>
        <tr>
          <td>數(shù)學(xué)</td>
          <td><input type="text" name="" v-model.number="math" value="{{math}}"></td>
        </tr>
        <tr>
          <td>物理</td>
          <td><input type="text" name="" v-model.number="physics" value="{{physics}}"></td>
        </tr>
        <tr>
          <td>英語</td>
          <td><input type="text" name="" v-model.number="english" value="{{english}}"></td>
        </tr>
        <tr>
          <td>總分</td>
          <td>{{math+physics+english}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
<script src="lib/vue.js" charset="utf-8"></script>
<script src="js/main_18.8.js" charset="utf-8"></script>

</html>



//main.js
var app= new Vue({
  el:"#app",
  data:{
    math:90,
    physics:80,
    english:30,
  }
})

clipboard.png
Vue新手，照著視頻寫的，數(shù)據(jù)正常，但是控制臺有報錯，是什么問題，好像這是1.X的寫法，2.0該怎么改呢？

回答
編輯回答
兮顏

vue2.x中所有的屬性綁定都可以寫成:[屬性名]="[屬性值變量]"的形式。雙引號中內(nèi)容會按照變量解析。

2017年2月11日 13:09
編輯回答
大濕胸

屬性中不得受用插值語法
如果你想給表單單向綁定value 使用 v-bind
<input type="text" name="" v-bind:value="english">

雙向綁定用v-model

2018年8月28日 21:40
編輯回答
放開她

新手建議用vue-cli，沒去看過1.X的語法，更沒看過源碼了。
2.x的話，

<input v-model="value" />
//value寫在data里，即可實現(xiàn)雙向綁定了。
//當(dāng)然也可以用v-bind:value
2017年11月4日 09:59
編輯回答
毀與悔

看一下文檔
v-model="english"

2017年6月29日 17:31
編輯回答
別硬撐

看報錯 v-bind或者 ：value 的簡寫形式

2018年9月13日 18:30
編輯回答
獨特范

謝邀！

造成如上錯誤的原因是Vue2.0里屬性綁定數(shù)據(jù)已經(jīng)棄用了 Mustache {{ }} 而改用 v-bind。為什么會棄用？大致如下原因：

html都是給瀏覽器引擎解析的，像 <img src = {{img_url}} /> 這種在html標(biāo)簽里使用 Mustache {{ }} 進(jìn)行屬性綁定數(shù)據(jù)的，在 vue 處理 img_url 之前，瀏覽器會得到一個錯誤的 src 值，即{{ img_url }}，所以瀏覽器會發(fā)送一個錯誤的 GET 請求，用 v-bind ,即 <img v-bind:src = 'img_url'> 或 <img :src = 'img_url'> ，對于 v-bind:src 和 :src 瀏覽器根本不認(rèn)識，一個沒有 src 的 img，瀏覽器是不會發(fā)出請求的，因此 Vue2.0 統(tǒng)一了接口，去除了不能通用的 Mustache {{ }} 。

所以如上代碼正確寫法應(yīng)該是這樣的：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>vue</title>

</head>

<body>
  <div id="app">
    <table>
      <thead>
        <th>學(xué)科</th>
        <th>分?jǐn)?shù)</th>
      </thead>
      <tbody>
        <tr>
          <td>數(shù)學(xué)</td>
          <td><input type="text" name="" v-model.number="math"></td>
        </tr>
        <tr>
          <td>物理</td>
          <td><input type="text" name="" v-model.number="physics"></td>
        </tr>
        <tr>
          <td>英語</td>
          <td><input type="text" name="" v-model.number="english"></td>
        </tr>
        <tr>
          <td>總分</td>
          <td>{{math+physics+english}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
<script src="lib/vue.js" charset="utf-8"></script>
<script src="js/main_18.8.js" charset="utf-8"></script>

</html>



//main.js
var app= new Vue({
  el:"#app",
  data:{
    math:90,
    physics:80,
    english:30,
  }
})

刪除value="{{math}}"、value="{{physics}}"、value="{{english}}"即可！

2017年2月28日 10:44