<body>
<div>
<div id="div">
{{message}}
</div>
<div id = 'div2' v-bind:title="message">
鼠标悬停
</div>
<div id="div3" v-if="see">条件</div>
<div id="div4">
<a v-for="(value , key) in data">
{{key}}:{{value.name}}
</a>
</div>
<div id="div5" >
{{ un > 3 ? '大' : '小'}}
{{fun()}}
</div>
</body>
<div id="div6">
<p v-text="text"></p>
<a v-html="html" v-bind:href="'#'+id"></a>
<img v-bind:src="src" />
</div>
<div id="div7" v-bind:class="{active: isActive}">
css
</div>
<!-- v-bind:缩写 -->
<div id="div8" :class="[activeClass,dangerClass]"></div>
<!-- 数据单项绑定 -->
<div id="div9">
<input type="text" :value="val" />
</div>
<!-- 数据双向绑定 -->
<div id="div10">
<input type="text" v-model="val" />
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
//文本
var app = new Vue({
// 设置要操作的元素
el:'#div',
// 要替换的额数据
data:{
message:'hellovue'
}
})
//绑定事件
var app2 = new Vue({
el:'#div2',
data:{
message: '页面加载于 ' + new Date().toLocaleString()
}
})
//if条件
var app3 = new Vue({
el:'#div3',
data:{
see : true,
}
})
//循环
var app4 = new Vue({
el:'#div4',
data:{
data:[
{name:'wyq'},
{name:'fj'},
{name:'zw'}
]
}
})
//使用JavaScript表达式
var app5 = new Vue({
el:'#div5',
data:{
un : 2,
fun : ()=> {return 1+2}
}
})
//v-text 和 v-html的区别 绑定图片路径地址 、 绑定a标签上的id
var app6 = new Vue({
el:'#div6',
data:{
text:'<h1>vue</h1>',
html:'<h1>vue</h1>',
src: '1.png',
id : 1
}
})
//绑定class，对象模式
var app7 = new Vue({
el:'#div7',
data:{
isActive:true,
}
})
//绑定class，数组模式
var app8 = new Vue({
el:'#div8',
data:{
activeClass : 'active',
dangerClass : 'dager-text'
}
})
//数据单项绑定
var app9 = new Vue({
el:'#div9',
data:{
val: 'hello world!'
}
})
//数据双向绑定
var app10 = new Vue({
el:'#div10',
data:{
val : 'hello world!'
}
})
</script>
页面展示
299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
