You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
2.0 KiB
98 lines
2.0 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>Title</title> |
|
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script> |
|
|
|
</head> |
|
<body> |
|
|
|
<div id="app"> |
|
<input type="text" v-model="firstName" value="123"> |
|
<input type="text" v-model="lastName"> |
|
<input type="text" v-model="name"> |
|
<button @click="save(1)">显示1</button> |
|
<button @click="save(2)">显示2</button> |
|
<button @click="save(3)">显示3</button> |
|
<ol> |
|
<!-- 变量对应的dom，li，变动--> |
|
<li v-for="(todo,index) in todos" :key="index"> |
|
{{ todo.text }}-{{ index }} |
|
</li> |
|
</ol> |
|
<ol> |
|
<!-- 变量对应的dom，li，变动--> |
|
<li v-for="todo in todos"> |
|
{{ todo.text }} |
|
</li> |
|
</ol> |
|
<div v-bind:style="styleObject">123123</div> |
|
|
|
</div> |
|
</body> |
|
</html> |
|
<script> |
|
import axios from "axios"; |
|
new Vue({ |
|
el: '#app', |
|
data: { |
|
styleObject: { |
|
'color': 'red', |
|
'font-size': '33px' |
|
}, |
|
account: 'account', |
|
pwd: '', |
|
a: 'https://cn.vuejs.org/images/logo.svg', |
|
firstName: '王', |
|
lastName: '念超', |
|
//响应式 |
|
todos: [ |
|
//变量，变了 |
|
{text: '学习 JavaScript'}, |
|
{text: '学习 Vue'}, |
|
{text: '整个牛项目'} |
|
], |
|
list: [] |
|
}, |
|
methods: { |
|
save(type) { |
|
this.show = type |
|
|
|
}, |
|
}, |
|
computed: { |
|
accountAndPwd() { |
|
return this.account + this.pwd |
|
}, |
|
name: { |
|
get: function () { |
|
return this.firstName + this.lastName |
|
}, |
|
}, |
|
}, |
|
//监听器 |
|
watch: { |
|
name(newVal, oldVal) { |
|
console.log('计算属性变了', newVal, oldVal) |
|
} |
|
}, |
|
created() { |
|
this.name = 1 |
|
//请求后端的数据 |
|
console.log('created') |
|
console.log(this.name) |
|
}, |
|
mounted() { |
|
let ajax = new XMLHttpRequest() |
|
ajax.onreadystatechange = e => { |
|
if (e) { |
|
|
|
} |
|
} |
|
ajax.open('xxxx') |
|
ajax.send() |
|
|
|
}, |
|
}) |
|
</script> |