1. v-html 指令如下代码演示
html代码
<div id="app" v-html="url"></div>js代码
const vm=new Vue({
el:'#app',
data(){
return {
url:'<a href="http://www.baidu.com">百度一下</a>'
}
}
})2. v-text 指令如下代码演示
html代码
<div id="app">
<h2>{{texts}},在你</h2>
<h2 v-text="texts">,在在</h2>
</div>js代码
const vm=new Vue({
el:'#app',
data(){
return{
texts:'你好啊'
}
}
})3. v-on 指令如下代码演示
html代码
<div id="app">
<!-- <button v-on:click='add'>+</button> -->
<!-- v-on:click可以简写成 @click-->
<button @click='add'>+</button>
<div>{{num}}</div>
<!-- <button v-on:click="ajj">-</button> -->
<button @click='ajj'>-</button>
</div>js代码
const vm=new Vue({
el:'#app',
data(){
return{
num:0,
}
},
methods:{//所有的vue中的方法都可以写在methods里面
// add:function(){
// console.log('add');
// },
// ajj:function(){
// console.log('ajj')
// }
add(){
this.num++
},
ajj(){
if(this.num>0){
this.num--
}
}
}
})
/* 1.v-on
2.methods //方法的意思
3.es5和es6函数的写法
4.v-on:click 简写 @click
*/4. v-clock 指令如下代码演示
html代码
<div id="app" v-cloak>
<h2>{{msg}}</h2>
</div>css代码
[v-cloak]{
display: none !important;
}js代码
setTimeout(() => {
const vm = new Vue({
el: '#app',
data() {
return {
msg: '我就是这么倔强'
}
}
})
}, 200)5.v-once 指令如下代码演示
html代码
<div id="app">
<!-- <h2>{{agm}}</h2> -->
<h2 v-once>{{agm}}</h2>
</div>js代码
const vm=new Vue({
el:'#app',
data(){
return{
agm:'我是谁'
}
}
})6.v-pre 指令如下代码演示
html代码
<div id="app">
<h2>{{mag}}</h2>
<h2 v-pre>{{mag}}</h2>
</div>js代码
const vm=new Vue({
el:'#app',
data(){
return{
mag:'我比v-once还厉害'
}
}
})7.v-for 指令如下代码演示 用 in/of 获取数组或对象中的每个值
获取数组的值 html代码
<div id="app">
<h2 v-for="item of arr">{{item}}</h2>
</div> <div id="app">
<h2 v-for="item in arr">{{item}}</h2>
</div>js代码
const vm=new Vue({
el:'#app',
data(){
return{
arr:['张三','李四','王武','赵六']
}
}
})获取数组对象的值和索引号 html代码
<div id="app">
<h2 v-for="(item,index) in obj" :key="index">{{item.name}}{{index}}</h2>
</div>js代码
const vm=new Vue({
el:'#app',
data(){
return{
obj:[
{
id:1,
name:'张三',
},{
id:2,
name:'李四',
},{
id:3,
name:'王武'
}
]
}
}
})获取对象的值 html代码
<div id="app">
<h2 v-for="item in obj">{{item}}</h2>
</div>js 代码
const vm=new Vue({
el:'#app',
data(){
return{
obj:{
name:'张三',
age: 20,
sex: '男'
}
}
}
})8.v-bind 指令如下代码演示
v-bind绑定对象指令html 代码
<div id="app">
<h2 v-bind:class="changeActive()" v-on:click="change">{{texts}}</h2>
</div>css代码
.active{
color: green;
}js代码
const vm=new Vue({
el:'#app',
data(){
return{
texts:'动态绑定对象',
isactive:false
}
},
methods:{//方法
change(){
this.isactive = !this.isactive
},
changeActive(){
return {active:this.isactive}
}
}
})v-bind 和 v-for 结合
html代码
<div id="app">
<ul>
<!-- <li v-for="(item,index) in movies" :key="index" :class="
{active:currentIndex==index}" @click="change(index)">{{item}}</li> -->
<li v-for="(item,index) in movies" :key="index" :class="currentIndex==index?'active':''" @click="change(index)">{{item}}</li>
<!-- 动态绑定三元表达式 -->
</ul>
</div>css代码
.active {
color: #f00;
}js代码
const vm = new Vue({
el: '#app',
data() {
return {
currentIndex: 0,
movies: ["海王", "海贼王", "火影忍者", "复仇者联盟"]
}
},
methods: {
change(i) {
/* this.currentIndex = i */
if (this.currentIndex == i) return
this.currentIndex = i
}
}
})v-bind动态绑定class(数组用法)
<div id="app">
<h2 :class="['active','aaa']">我们正在学习vue</h2>
<h2 :class="[active,aaa]">我们正在学习vue</h2>
<h2 :class="getStyle()">我们正在学习vue</h2>
</div>js代码
/* 数组中加引号和不加引号有区别
加引号:表示字符串 是固定的,
不加引号:表示变量是不固定的 */
const vm = new Vue({
el:'#app',
data(){
return {
active:'isactive',
aaa:'bbb'
}
},
methods:{
getStyle(){
return [this.active,this.aaa]
}
}
})v-bind动态绑定style对象语法
html代码
<div id="app">
<h2 :style="{fontSize:'50px'}">我们爱学习</h2>
<h2 :style="{fontSize:fontsize}">我们爱学习</h2>
<h2 :style="getStyle()">我们爱学习</h2>
</div>js代码
const vm = new Vue({
el:'#app',
data(){
return {
fontsize:40+'px'
}
},
methods:{//方法
getStyle(){
return {fontSize:this.fontsize}
}
}
})v-bind动态绑定style数组语法
<div id="app">
<h2 :style="[baseStyle]">我们爱学习</h2>
<h2 :style="['baseStyle']">我们爱学习</h2><!-- 无意义 -->
<h2 :style="getStyle()">我们爱学习</h2>
</div>js代码
const vm = new Vue({
el:'#app',
data(){
return {
baseStyle:{background:'#f00'}
}
},
methods:{
getStyle(){
return [this.baseStyle]
}
}
})