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>