---
# System prepended metadata

title: vue綁定元素屬性
tags: [Java Web-vue]

---

# vue綁定元素屬性
###### tags: `Java Web-vue`
### 範例一
#### vue的屬性綁定
```htmlembedded=
var vue = new Vue({
                "el":"#div0",
                data:{
                    msg:"hello!!!",
                    uname:"鸠摩智"
                }
            });
```
#### js應用
```htmlembedded=
<div id="div0">
        <span>{{msg}}</span>
        <!-- v-bind:value表示绑定value属性 , v-bind可以省略，也就是 :value -->
        <!--<input type="text" v-bind:value="uname"/>-->
        <input type="text" :value="uname"/>
    </div>
```
#### 顯現
![](https://i.imgur.com/syreQcv.png)

### 範例2
#### vue代碼
```javascript=
// 创建Vue对象，挂载#app这个div标签
var app = new Vue({
	"el":"#app",
	"data":{
		"vueValue":"太阳当空照"
	}
});

```

#### html代碼
```htmlembedded=
<div id="app">
	<!-- v-bind:value表示将value属性交给Vue来进行管理，也就是绑定到Vue对象 -->
	<!-- vueValue是一个用来渲染属性值的表达式，相当于标签体中加{{}}的表达式 -->
	<input type="text" v-bind:value="vueValue" />
	
	<!-- 同样的表达式，在标签体内通过{{}}告诉Vue这里需要渲染； -->
	<!-- 在HTML标签的属性中，通过v-bind:属性名="表达式"的方式告诉Vue这里要渲染 -->
	<p>{{vueValue}}</p>
</div>


```