91 lines
2.0 KiB
HTML
91 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Title</title>
|
||
<style>
|
||
[v-cloak] {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="app" v-cloak>
|
||
<h1>{{ test }}</h1>
|
||
<a :href="url">你好</a>
|
||
|
||
<div v-html="h2html"></div>
|
||
<div v-text="h2html"></div>
|
||
|
||
<ul>
|
||
<li v-for="(v,i) in newsList" :key="i">
|
||
{{ i }} ：{{ v.title }}
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<div v-show="isShow">
|
||
v-show 指令学习
|
||
</div>
|
||
|
||
<div v-if="vipLeave == 1">vip1</div>
|
||
<div v-else-if="vipLeave == 2">vip2</div>
|
||
<div v-else-if="vipLeave == 3">vip3</div>
|
||
<div v-else-if="vipLeave == 4">vip4</div>
|
||
<div v-else>暂无vip</div>
|
||
|
||
|
||
<input type="text" v-model="userName" placeholder="请输入用户名">
|
||
|
||
{{ userName }}
|
||
|
||
<div v-once>{{userName}}</div>
|
||
|
||
<button @click="hello(1)">登 录</button>
|
||
|
||
<span v-pre>{{ test }}</span>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</body>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
|
||
<script>
|
||
// vue 指令
|
||
// v-bind 将变量绑定到标签的属性上 简写 :
|
||
// v-html 将变量渲染为html
|
||
// v-text 将变量渲染为text文本
|
||
// v-for 遍历数组
|
||
// v-show 根据一个变量的true或false决定元素是否显示 只是对元素进行 display none 和 block 的设置
|
||
// v-if v-else 不符合条件的元素，不在代码里面显示，直接被删除
|
||
// v-model 获取输入框的内容
|
||
// v-on 绑定点击事件 @
|
||
var vm = new Vue({
|
||
el: ".app",
|
||
data: {
|
||
test: '你好我是vue',
|
||
url: "http://www.netbian.com/dongman/",
|
||
h2html: "<h2>我是h2</h2>",
|
||
newsList: [
|
||
{ title: '测试新闻1',id: 1 },
|
||
{ title: '测试新闻2',id: 2 },
|
||
{ title: '测试新闻3',id: 3 },
|
||
{ title: '测试新闻4',id: 4 },
|
||
{ title: '测试新闻5',id: 5 }
|
||
],
|
||
isShow: false,
|
||
vipLeave: 3,
|
||
userName: "张三"
|
||
},
|
||
methods: {
|
||
hello(a) {
|
||
console.log(a)
|
||
console.log(this.userName)
|
||
},
|
||
test2() {}
|
||
}
|
||
})
|
||
</script>
|
||
</html> |