App.vue部分
<template>
<div id="app">
<img src="./assets/logo.png">
<spans></spans>
</div>
</template>
<script>
import spans from './components/loginOut'
export default {
name: 'app',
components: {
spans
}
}
</script>
添加html
使用 v-html 指令用於輸出 html 代碼:
<template>
<div id="Hello">
<p v-html="message"></p>
</div>
</template>
<script>
export default{
name: '#Hello',
data() {
return{
message:'<h1><a href="http://www.baidu.com">菜鳥教程</a></h1>'
}
}
}
</script>
屬性HTML 屬性中的值應使用 v-bind 指令。
以下實例判斷 class1 的值,如果爲 true 使用 class1 類的樣式,否則不使用該類:
<template>
<div id="Hello">
<label for="r1">修改顏色</label>
<input type="checkbox" v-model="class1" id="r1">
<br><br>
<div v-bind:class="{'class1': class1}">
directiva v-bind:class
</div>
</div>
</template>
<script>
export default{
name: '#Hello',
data() {
return{
class1: false
}
}
}
</script>
<style>
.class1{background: #444;color: #eee;}
</style>
表達式Vue.js 都提供了完全的 JavaScript 表達式支持。
<template>
<div id="Hello">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鳥教程</div>
</div>
</template>
<script>
export default{
name: '#Hello',
data() {
return{
ok:true,
message:'RUNOOB',
id:2018
}
}
}
</script>
指令指令是帶有 v- 前綴的特殊屬性。
指令用於在表達式的值改變時,將某些行爲應用到 DOM 上。如下例子:
<template>
<div id="Hello">
<p v-if="seen">現在你看到我了</p>
<template v-if="ok">
<h1>菜鳥教程</h1>
<p>學的不僅是技術,更是夢想!</p>
<p>哈哈哈,打字辛苦啊!!!</p>
</template>
</div>
</template>
<script>
export default{
name: '#Hello',
data() {
return{
seen:true,
ok:true
}
}
}
</script>
參數參數在指令後以冒號指明。例如, v-bind 指令被用來響應地更新 HTML 屬性:
<template>
<div id="Hello">
<pre><a v-bind:href="url">菜鳥教程</a></pre>
</div>
</template>
<script>
export default{
name: '#Hello',
data() {
return{
url:'http://www.baidu.com'
}
}
}
</script>