<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小帅学习VUE</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h1>v-model</h1>
<p>用于表单的双向绑定</p>
<input type="text" v-model="val" />
{{val}}
<p>
<h2>表单演示</h2>
<h3>问卷调查</h3>
</p>
<p>
<span>姓名:</span>
<input type="text" name="name" v-model="name" />
</p>
<p>
<span>性别:</span>
<input type="radio" name="sex" value="男" v-model="sex" />男
<input type="radio" name="sex" value="女" v-model="sex" />女
</p>
<p>
<span>爱好:</span>
<input type="checkbox" name="hobby" value="打篮球" v-model="hobby" />打篮球
<input type="checkbox" name="hobby" value="打足球" v-model="hobby" />足球
</p>
<p>
<span>籍贯</span>
<select name="address" v-model="address">
<option value="请选择">请选择</option>
<option value="陕西">陕西</option>
<option value="山西">山西</option>
<option value="北京">北京</option>
</select>
</p>
<B>你的姓名是:{{name}},性别为:{{sex}},爱好是:{{hobby}},籍贯是:{{address}}
</B>
<button @click="submitForm">提交</button>
<h1>v-bind</h1>
<p>绑定属性,动态的加载资源v-bind: 可以简写成 :</p>
<h2>轮播图效果展示:</h2>
<img :src="'../image/'+url+'.png'" alt="效果展示"></img>
<button @click="imgAdd">下一张</button>
<button @click="imgReduce">上一张</button>
<h1>v-on
</h1>
<p>给元素添加事件监听,可以简写为@</p>
<span>如果有一样的方法名,最后面的方法会覆盖前面的方法,也就说会执行最后一个方法</span>
<h1>v-pre</h1>
<span v-pre>{{a}}</span>
<p>不会进行编译代码,相当于写啥,展示啥</p>
<h1>v-once学习</h1>
<p v-once>{{a}}</p>
<button @click="add">加一</button>
<button @click="reduce">减一</button>
<p>该作用是只会更新一次数据,适用于一些静态资源的展示</p>
<h1>v-cloak学习</h1>
<p>有v-cloak选择器的元素进行隐藏,不会显示渲染之前的样式代码,也就是编译前的代码,渲染以后才会加载,通常是配合css样式为none配合来使用</p>
<h1>v-if</h1>
<p>v-if 效果是会加载dom元素标签,不是通过style去控制显示和隐藏</p>
<!-- 是值的话 不是0的话 就是 true 是0的话就是false -->
<p v-if="boo">1--非0</p>
<p v-if="!boo">2</p>
<p v-if="true">3--true</p>
<p v-if="false">4</p>
<h1>v-show 学习</h1>
<p>不会加载dom元素标签,是通过标签的样式去控制是否显示</p>
<p v-show="true">5</p>
<p v-show="false">6</p>
<p v-show="false">6</p>
<h1>v-for 学习</h1>
<h2>循环</h2>
<ul v-for="item in arr">
<li v-for="(item,index) in arr" :key="index">
{{index}} {{item}}
</li>
</ul>
<h2>json数组对象遍历</h2>
<table>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<tr v-for="(item,key,index) in obj" :key="index">
<td>{{index}}</td>
<td>{{key}}</td>
<td>{{item.name}}</td>
<td>{{item.sex}}</td>
<td>{{item.age}}</td>
<td><button @click="select(item.name)">操作</button></td>
</tr>
</table>
<h2>json对象遍历</h2>
<ul>
<li v-for="(item,key,index) in person">
{{index}}={{key}}={{item}}
</li>
</ul>
<h2>九九乘法表</h2>
<table>
<tr v-for="i in number">
<td v-for="j in i">
{{j}}X{{i}}={{i*j}}
</td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: "#app",//挂载元素
data: {//数据
name: "",
sex: "",
hobby: [],
address: "请选择",
val: "123",
url: 0,
a: 100,
boo: "1",
message: "1",
arr: [
"苹果",
"橘子",
"香蕉"
],
number: [1, 2, 3, 4, 5, 6, 7, 8, 9],
obj: [
{ name: '小高', age: "25", sex: '男' },
{ name: '小公', age: "23", sex: '红' },
{ name: '小帅', age: "24", sex: '男' }
],
person: {
name: "小帅",
age: 25,
sex: "男",
hight: "178"
}
},
methods: {//方法
add() {
this.a++,
alert(this.a)
},
reduce() {
this.a--,
alert(this.a)
},
select(sysId) {
alert(sysId)
},
imgAdd() {
this.url++
if (this.url > 2) {
this.url = 0
}
},
imgReduce() {
this.url--
if (this.url < 0) {
this.url = 2
}
},
submitForm() {
let obj={
name:this.name,
sex:this.sex,
hobby:this.hobby,
address:this.address
}
console.log(obj);
}
}
});
</script>
</body>
</html>
03-11
1998
1998
06-15
1108
1108
06-15
1768
1768
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
