1、v-html
v-html :以html的格式输出
<table>
<!-- 表格行 -->
<!-- 使用了2种标签v-html 和v-if -->
<!-- v-html :以html的格式输出 -->
<!-- v-if :通过获取data里面的属性决定元素是否显示 -->
<tr>
<td>
<button @click="show_v_html_label()">测试显示/隐藏 【v-html】</button>
</td>
<td>
<p v-html="html_str" v-if="sw_show_html"></p>
</td>
</tr>
</table>
data为:
sw_show_html:false,// 控制是否显示v-html标签
html_str: '<p> test v-html </p>',
click方法:
show_v_html_label(){
this.sw_show_html = !this.sw_show_html;
},
测试截图;
@click是v-on:click的缩写
2、v-bind和v-on
<table>
<!-- 测试v-bind 和 v-on ,这两个标签都可以缩写-->
<!-- 可以绑定v-bind:src v-bind:href v-bind:class 。可缩写为 :src :href :class -->
<!-- v-on: 监听DOM事件 例如:【v-on:click】 点击事件 也可以缩写成 【@click】 。鼠标移动到组件上【v-on:mouseenter】可以缩写成【@mouseenter】-->
<tr>
<td>
<button v-on:click="chang_img_src()">切换src【v-bind:src】</button>
<button @click="chang_img_src()">切换src【@click】</button>
<button v-on:mouseenter="chang_img_src()">鼠标移动切换src【v-on:mouseenter】</button>
</td>
<td>
<img v-bind:src='img_url' width="100dp" height="80dp">
</td>
</tr>
</table>
测试data
img_index:1,//设置图片索引
img_url:"",
img_url_1:'http://t9.baidu.com/it/u=3363001160,1163944807&fm=79&app=86&f=JPEG?w=1280&h=830',
img_url_2:'http://t7.baidu.com/it/u=3204887199,3790688592&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1594713325&t=6d306afefca8cf412268d2f9748aee46',
方法:
chang_img_src(){// 修改图片的url
if(this.img_index ===1){
this.img_index ++;
this.img_url = this.img_url_2;
}else{
this.img_index --;
this.img_url = this.img_url_1;
}
},
运行截图:
3、v-model
用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值
<table>
<!-- 测试v-model ,用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值-->
<tr>
<td>
<p>测试v-model在input标签中使用 :{{msg_model_str}}</p>
</td>
<td>
<input v-model="msg_model_str">
<!-- 上面是这个语句的简写 -->
<input :value="msg_model_str" @input="msg_model_str= $event.target.value">
<!-- 上面是这个语句的简写 v-bind 和 v-on都可以缩写-->
<input v-bind:value="msg_model_str" v-on:input="msg_model_str= $event.target.value">
</td>
</tr>
</table>
data:
msg_model_str:'test v-model',
运行截图:
**4、filter ,使用 | **
vue中的过滤器的使用
前面的值(test_str)会作为参数传递给后面的filter方法
<!-- 测试filters 过滤器 | , 过滤器可以串联-->
<table>
<tr>
<td>
<p>测试filters | 前面的值(test_str)会作为参数传递给后面的filter方法 = </p>
</td>
<td>
{{'test_str' | capitalize | capitalize1}}
</td>
</tr>
</table>
方法:
filters:{
capitalize (value) {
return value + '-first_filter'
},
capitalize1 :function (value) {// 方法不同的写法而已
return value + '-second_filter'
}
},
运行截图:
5、v-else
测试v-else 指令, 注意v-else后面不需要跟属性
<!-- 测试v-else 指令, 注意v-else后面不需要跟属性-->
<table>
<tr>
<td>
<p> </p>
<button @click="test_v_else()">测试v-else 指令</button>
</td>
<td>
<p v-if="b_test_else">{{ramdon_num}} : 大于0.5</p>
<p v-else>{{ramdon_num}}: 小于0.5</p>
</td>
</tr>
</table>
data:
b_test_else:false,
ramdon_num:0,
方法:
test_v_else(){
this.ramdon_num = Math.random();
if(this.ramdon_num > 0.5){
this.b_test_else = true;
}else{
this.b_test_else = false;
}
},
运行截图:
6、v-show指令
和v-if功能一样,可以控制是否加载元素
<table>
<!-- 测试v-show指令 和v-if功能一样 -->
<tr>
<td>
<button @click="show_v_html_label()">测试显示/隐藏 【v-show】</button>
</td>
<td>
<p v-html="html_str" v-show="sw_show_html" ></p>
</td>
</tr>
</table>
运行截图:
7、v-for指令
需要注意的是:需要加上v-bind:key,虽然功能正常,但会报语法错误
<table>
<!-- 测试v-for指令 -->
<!-- 需要注意的是:需要加上v-bind:key,虽然功能正常,但会报语法错误 -->
<tr>
<td>
<p>测试指令 【v-for】:</p>
</td>
<td v-for="item in sites" v-bind:key='item'>
<p>name={{item.name}}, </p>
</td>
</tr>
</table>
<table>
<!-- 测试v-for指令 ,循环整数-->
<!-- 需要注意的是:需要加上v-bind:key,虽然功能正常,但会报语法错误 -->
<tr>
<td>
<p>测试指令【v-for】:</p>
</td>
<td v-for="n in 5" v-bind:key='n'>
<p>n={{n}}, </p>
</td>
</tr>
</table>
data:
sites:[
{ name: 'Baidu' },
{ name: 'Google' },
{ name: 'Taobao' }
],
运行截图:
8、computed指令
computed和methods都是定义方法,区别是,computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。
而使用 methods ,在重新渲染的时候,函数总会重新调用执行
<table>
<!-- 测试computed指令,computed和methods区别是,computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。
而使用 methods ,在重新渲染的时候,函数总会重新调用执行-->
<tr>
<td>
<p>测试计算属性【computed】{{message}}反转:</p>
</td>
<td >
<p>{{reversedMessage}}</p>
</td>
</tr>
</table>
方法:
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
},
运行截图: