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>