Raw expression: :href="{{demo.hrefs}}"

1、错误描述

Failed to compile.

./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-04c2046b","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue
(Emitted value instead of an instance of Error) 
  Error compiling template:
  
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <h2>实例</h2>
    <ol>
    	<li v-for="item in items">{{item.name}}</li>
    </ol>
    <h2>必要连接</h2>
    <ul>
      <li v-for="demo in demos"><a :href="{{demo.hrefs}}" target="_blank">{{demo.content}}</a></li>
    </ul>
    <h2>生态系统</h2>
    <ul>
      <li v-for="system in systems"><a :href="system.hrefs" target="_blank">{{system.content}}</a></li>
    </ul>
  </div>
  
  - invalid expression: Unexpected token { in

    {{demo.hrefs}}

  Raw expression: :href="{{demo.hrefs}}"


 @ ./src/App.vue 11:0-238
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

2、错误原因

     在绑定超级链接中的href属性，不需要{{}}；如果添加了{{}}反而会出错

3、解决办法

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <h2>实例</h2>
    <ol>
    	<li v-for="item in items">{{item.name}}</li>
    </ol>
    <h2>必要连接</h2>
    <ul>
      <li v-for="demo in demos"><a :href="demo.hrefs" target="_blank">{{demo.content}}</a></li>
    </ul>
    <h2>生态系统</h2>
    <ul>
      <li v-for="system in systems"><a :href="system.hrefs" target="_blank">{{system.content}}</a></li>
    </ul>
  </div>
</template>

<script>
	export default {
	  name: 'app',
	  data () {
	    return {
	      msg: '简单模板',
	      items:[
	      	{name:'Vue.js'},
	      	{name:'HTML5'},
	      	{name:'CSS3'},
	      	{name:'C++'},
	      	{name:'Java'}
	      ],
	      demos:[
	      	{hrefs:"https://vuejs.org",content:"核心文档"},
	      	{hrefs:"https://forum.vuejs.org",content:"Forum"},
	      	{hrefs:"https://chat.vuejs.org",content:"社区聊天"},
	      	{hrefs:"https://twitter.com/vuejs",content:"Twitter"}
	      ],
	      systems:[
	      	{hrefs:"http://router.vuejs.org/",content:"vue路由"},
	      	{hrefs:"http://vuex.vuejs.org/",content:"vuex"},
	      	{hrefs:"http://vue-loader.vuejs.org/",content:"vue-loader"},
	      	{hrefs:"https://github.com/vuejs/awesome-vue",content:"awesome-vue"}
	      ]
	    }
	  }
	}
</script>

<style lang="scss">
	#app {
	  font-family: 'Avenir', Helvetica, Arial, sans-serif;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  text-align: center;
	  color: #2c3e50;
	  margin-top: 60px;
	}
	
	h1, h2 {
	  font-weight: normal;
	}
	
	ul {
	  list-style-type: none;
	  padding: 0;
	}
	
	li {
	  display: inline-block;
	  margin: 0 10px;
	}
	
	a {
	  color: #42b983;
	}
</style>