<template>
<div class="hello">
<h1>{{ msg }}</h1>
<!--数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值:-->
<h1>{{ apple }}</h1>
<div v-html="'Html形式'+message"></div>
<!-- HTML属性中的值应使用 v-bind指令
如果 data返回的class1为true就使用class1类样式,否则就不使用-->
<label for="r1">修改颜色</label>
<input type="checkbox" v-model="class1" id="r1">
<br/>
<div v-bind:class="{'class1':class1}">
directiva v-bind:class
</div>
<!-- vue.js提供了完全的JavaScript 表达式支持-->
{{ 5+5 }}<br>
{{ ok ? 'YES':'No'}}<br>
{{ message.split('').reverse().join('')}}
<div v-bind:id="'list-' +id">菜鸟</div>
<!--指令 是带有v- 前缀的特殊属性
指令用于表达式的值改变时,将某些行为应用到DOM上
v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素
-->
<p v-if="seen">调节 data里的 seen属性为false关闭我</p>
<!--响应式更新html属性-->
<pre><a v-bind:href="url">Baidu</a></pre>
<!--双向绑定数据-->
<p>{{ content }}</p>
<input v-model="content"/>
<!--翻转字符串-->
<p>{{ content}}</p>
<button v-on:click="reversMessage">反转字符串</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
msg: '欢迎来到我的王国!',
apple: "apple nihao!",
class1:false,
message:'noob',
id :3,
ok: true,
seen: true,
url:'http://www.baidu.com',
content:'默认值'
}
},
/* 该方法用于反转字符串*/
methods:{
reversMessage: function () {
this.content = this.content.split('').reverse().join('')
}
}
}
</script>
<style>
.class1{
background: #444;
color: #eee;
}
</style>