- 手写一个vue页面,将data中的msg显示在页面中,用插值表达式和v-text和v-html三种方式。
<div id=app>
<p>111{{msg}}</p>
<p v-text="msg"></p>
<p v-html="msg2"></p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg="222",
msg2="<h6>222</h6>"
}
});
</script>
- v-for可以遍历那些值?遍历它们的语法分别是什么?
数字,数组,对象
<p v-for="value in a">
<span>{{valua}}</span>
</p>
<p v-for="(value,key) in a">
<span>{{key}}</span>
<span>{{value}}</span>
</p>
<p v-for="(value,key,i) in a">
<span>{{i}}</span>
<span>{{key}}</span>
<span>{{value}}</span>
</p>
- 强变量类型和若变量类型语言的差异性是什么?
强变量不经强制转化无法改变类型,弱变量则相反
- 将M中数据设置给标签的class属性的方式有几种?请分别写出一个案例。
单个值设置给标签:
<div id="app">
<div :class="c1">c1</div>
</div>
<script type="text/javascript"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
c1: 'cred',
}
</script>
对象式设置:
cobj: {
cred: true,
w100: true,
byellow: true
}
简单数组设置:
cSimplearray: ['cted', 'w100', 'byellow']
对象数组设置:
cobjarray: [{
cred: true
}, {
byellow: false
}, 'w100']
- 将M中数据设置给标签的style属性的方式有几种?请分别写出一个案例。
将对象属性对应的样式值设置给标签:
<div id="app">
<p :style="styleObjArray">1111</p>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
styleObj: {
'color': 'red',
'font-size': '40px',
},
});
</script>
将数组中对象中css样式设置给标签:
styleObjArray: [
{'color': 'red'},
{'font-size': '50px'}
]