- <template>
- <div class="hello">
- <h1>{{ msg }}</h1>
- <label for="r1">下载后删除</label><input type="checkbox" v-model="use" id="r1">
- <div v-bind:class="{'class1': use}">
- <h1>site : {{site}}</h1>
- </div>
- <h1>url : {{url}}</h1>
- <h1>Alexa : {{book}}</h1>
- <div id="app">
- {{5+5}}<br>
- {{ ok ? 'YES' : 'NO' }}<br>
- {{ message.split('').reverse().join('') }}
- <div v-bind:id="'list-' + id">菜鸟教程</div>
- </div>
- <div id="app">
- <p v-if="seen">现在你看到我了</p>
- </div>
- <p id="demo">这是一个段落</p>
- <button id="demo" type="button" onclick="document.getElementById('demo').innerHTML=Date()">显示日期</button>
- <pre><a v-bind:href="url">edgexfoundry社区</a></pre>
- <a v-on:click="doSomething">点这里</a>
- <form v-on:submit.prevent="onSubmit"></form>
- <p>{{ message }}</p>
- <button v-on:click= "reverseMessage" >反转字符串</button>
- <template v-if="ok">
- <h1>学些东西</h1>
- <p>学的不仅是技术，更是梦想！</p>
- <p>哈哈哈，打字辛苦啊！！！</p>
- <li v-for= "site in sites" :key="site.id">
- {{ site.name }}
- </li>
- </template>
- <div v-if="Math.random() > 0.5">
- Sorry
- </div>
- <div v-else>
- Not sorry
- </div>
- <ul>
- <li v-for="value in meizhou" :key="value.id">
- {{ value }}
- </li>
- <br>
- <br>
- <li v-for="(value, key, index) in object" :key="value.id">
- {{ index }}. {{ key }} : {{ value }}
- </li>
- <li v-for="(value, key) in meizhou" :key="value.id">
- {{ key }} : {{ value }}
- </li>
- </ul>
- <p>原始字符串: {{ message }}</p>
- <p>计算后反转字符串: {{ reversedMessage1 }}</p>
- 千米 : <input type = "text" v-model = "kilometers">
- 米 : <input type = "text" v-model = "meters">
- <p id="info"></p>
- </div>
- </template>
- <style>
- .class1{
- background: #444;
- color: #eee;
- }
- </style>
- <script type="text/javascript">
- import Vue from 'vue'
- var data = {site: '菜鸟教程', url: 'www.runoob.com', alexa: 10000}
- var vm = new Vue({
- el: '#hello',
- data: data
- })
- export default {
- name: 'hello',
- data () {
- return {
- site: '菜鸟教程',
- msg: '圣诞节快乐！',
- url: 'https://edgexfoundry.club/',
- book: 'turing',
- use: false,
- ok: true,
- message: 'RUNOOB',
- id: 1,
- seen: true,
- sites: [
- { name: 'Runoob' },
- { name: 'Google' },
- { name: 'Taobao' }
- ],
- meizhou: {
- name: '厄瓜多尔',
- url: 'http://www.runoob.com',
- slogan: '乌拉圭！'
- },
- kilometers: 0,
- meters: 0
- }
- },
- methods: {
- reverseMessage: function () {
- this.message = this.message.split('').reverse().join('')
- }
- },
- computed: {
- // 计算属性的 getter
- reversedMessage1: function () {
- // `this` 指向 vm 实例
- return this.message.split('').reverse().join('')
- }
- },
- watch: {
- kilometers: function (val) {
- // document.getElementById('info').innerHTML = '修改前值为: ' + this.kilometers + '，修改后值为: ' + val
- this.kilometers = val
- this.meters = this.kilometers * 1000
- },
- meters: function (val) {
- // document.getElementById('info').innerHTML = '修改前值为: ' + this.kilometers + '，修改后值为: ' + val / 1000
- this.kilometers = val / 1000
- this.meters = val
- }
- }
- }
- document.write(data.alexa === 10000)
- vm.site = 'Runoob'
- document.write(data.site + '<br>') // Runoob
- document.write(vm.$data === data) // true
- document.write('<br>')
- document.write(vm.$el === document.getElementById('hello'))
- // ……反之亦然
- data.alexa = 1234
- document.write(vm.alexa) // 1234
- </script>
| 
楼主
