vue中radio根据动态值绑定checked无效的解决
目录
- 1.问题分析
- 2.vue中分析（完成代码请看后面）
- 3.完成代码（该例子中input是自定义的样式）
- 1）json数据
- 2）html代码
- 3）css样式
- 4.效果图
1.问题分析
在vue之前，我们想要获取某一组（设置相同的name属性）radio的选中状态是通过name属性获取，判断input的checked是true还是false，但是当列表中有多组（动态获取）就显得很乏力；vue出现后我们可以通过v-model很巧妙的完成。
2.vue中分析（完成代码请看后面）
<input :name="item.COLUMN_CODE" :type="item.COLUMN_TYPE" v-model="item1.ISSELECT" value="true" :checked="item1.ISSELECT" :disabled="isAnswer" class="tui-checkbox">
我们将name绑定COLUMN_CODE设置为同一组radio或checkbox；v-model绑定返回的值ISSELECT（true/false），value=‘true’表示当ISSELECT的值为true是该radio或checkbox就自动选中，同理，当我们选中某一项时对应的ISSELECT自动切换成true。
vue官网描述的是无需设置name，但是我在项目中测试过是通不过的，因为还是无法识别是同一组还是不同组，所以建议读者 加上。
3.完成代码（该例子中input是自定义的样式）
1）json数据
{
"THEME_STATUE": "1",
"back_type": null,
"THEME_CODE": "1495077293228",
"THEME_NAME": "新款工作服样式调查问卷",
"POLL_TYPE_DESC": "投票问卷（选择答题）",
"POLL_TYPE": "B",
"THEME_CONTENT": "关于新款工作服样式评价的投票通知各位职工朋友：今年，公司工作服已到新一轮采购周期。为提高职工对工作服的满意度，展示职工良好形象,安全管理部与工会一同对职工的意见反馈进行了收集，并组织职工代表对新款样衣进行了初评。现请广大职工朋友根据图样展示，评选心目中最佳的春、夏和冬装棉服款式。我们将根据大家投票结果定款。安全管理部、工会2017年5月15日",
"ANSWER_MODE": "",
"POLL_MULT_NUM": "",
"POLL_SINGLE_NUM": "",
"MAX_POLL_NUM": "",
"POLL_SINGLE_SCORE": 0,
"POLL_MULT_SCORE": 0,
"BGIMG": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=a3d249fa8e3d72b9",
"SCORE_STATUS": "",
"SCORE_RESULT": "",
"CREATE_DATE": "2017-05-31",
"END_DATE": "2019-10-30",
"ISANSWER": false,
"COLUMN_LIST": [{
"COLUMN_CODE": "181",
"COLUMN_NAME": "1、您所在的工作单位",
"COLUMN_TYPE": "radio",
"COLUMN_CONTENT": "",
"ISSELECT": false,
"OPTION_LIST": [{
"OPTION_CODE": "191",
"OPTION_NAME": "A、厂 ",
"OPTION_HREF": "",
"OPTION_TYPE": "",
"OPTION_CONTENT": "",
"EMC_URL": "",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}, {
"OPTION_CODE": "192",
"OPTION_NAME": "B、烟厂 ",
"OPTION_HREF": "",
"OPTION_TYPE": "",
"OPTION_CONTENT": "",
"EMC_URL": "",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}, {
"OPTION_CODE": "193",
"OPTION_NAME": "C、湖北 ",
"OPTION_HREF": "",
"OPTION_TYPE": "",
"OPTION_CONTENT": "",
"EMC_URL": "",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}, {
"OPTION_CODE": "194",
"OPTION_NAME": "D、中国 ",
"OPTION_HREF": "",
"OPTION_TYPE": "",
"OPTION_CONTENT": "",
"EMC_URL": "",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}, {
"OPTION_CODE": "195",
"OPTION_NAME": "E、大大 ",
"OPTION_HREF": "",
"OPTION_TYPE": "",
"OPTION_CONTENT": "",
"EMC_URL": "",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}, {
"OPTION_CODE": "196",
"OPTION_NAME": "F、小小",
"OPTION_HREF": "",
"OPTION_TYPE": "",
"OPTION_CONTENT": "",
"EMC_URL": "",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}, {
"OPTION_CODE": "197",
"OPTION_NAME": "G、卷烟材料厂 ",
"OPTION_HREF": "",
"OPTION_TYPE": "",
"OPTION_CONTENT": "",
"EMC_URL": "",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}, {
"OPTION_CODE": "198",
"OPTION_NAME": "H、新业薄片公司 ",
"OPTION_HREF": "",
"OPTION_TYPE": "",
"OPTION_CONTENT": "",
"EMC_URL": "",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}]
}, {
"COLUMN_CODE": "142",
"COLUMN_NAME": "2、您所在的工作区域",
"COLUMN_TYPE": "radio",
"COLUMN_CONTENT": "",
"ISSELECT": false,
"OPTION_LIST": [{
"OPTION_CODE": "61",
"OPTION_NAME": "A、卷包车间 ",
"OPTION_HREF": "",
"OPTION_TYPE": "radio",
"OPTION_CONTENT": "",
"EMC_URL": "",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}, {
"OPTION_CODE": "62",
"OPTION_NAME": "B、制丝车间 ",
"OPTION_HREF": "",
"OPTION_TYPE": "radio",
"OPTION_CONTENT": "",
"EMC_URL": "",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}, {
"OPTION_CODE": "63",
"OPTION_NAME": "C、动力车间 ",
"OPTION_HREF": "",
"OPTION_TYPE": "radio",
"OPTION_CONTENT": "",
"EMC_URL": "",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}, {
"OPTION_CODE": "64",
"OPTION_NAME": "D、仓储、物流 ",
"OPTION_HREF": "",
"OPTION_TYPE": "radio",
"OPTION_CONTENT": "",
"EMC_URL": "",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}, {
"OPTION_CODE": "65",
"OPTION_NAME": "E、其他 ",
"OPTION_HREF": "",
"OPTION_TYPE": "text",
"OPTION_CONTENT": "",
"EMC_URL": "",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}]
}, {
"COLUMN_CODE": "143",
"COLUMN_NAME": "3、您所在的工作岗位",
"COLUMN_TYPE": "radio",
"COLUMN_CONTENT": "",
"ISSELECT": false,
"OPTION_LIST": [{
"OPTION_CODE": "66",
"OPTION_NAME": "A、操作工 ",
"OPTION_HREF": "",
"OPTION_TYPE": "",
"OPTION_CONTENT": "",
"EMC_URL": "",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}, {
"OPTION_CODE": "67",
"OPTION_NAME": "B、维修工 ",
"OPTION_HREF": "",
"OPTION_TYPE": "",
"OPTION_CONTENT": "",
"EMC_URL": "",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}, {
"OPTION_CODE": "68",
"OPTION_NAME": "C、辅助工 ",
"OPTION_HREF": "",
"OPTION_TYPE": "",
"OPTION_CONTENT": "",
"EMC_URL": "",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}, {
"OPTION_CODE": "69",
"OPTION_NAME": "D、管理人员 ",
"OPTION_HREF": "",
"OPTION_TYPE": "",
"OPTION_CONTENT": "",
"EMC_URL": "",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}, {
"OPTION_CODE": "70",
"OPTION_NAME": "E、其他 ",
"OPTION_HREF": "",
"OPTION_TYPE": "text",
"OPTION_CONTENT": "",
"EMC_URL": "",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}]
}, {
"COLUMN_CODE": "144",
"COLUMN_NAME": "4、您心目中最佳的春、夏款式是",
"COLUMN_TYPE": "radio",
"COLUMN_CONTENT": "",
"ISSELECT": false,
"OPTION_LIST": [{
"OPTION_CODE": "71",
"OPTION_NAME": "A、春、夏款款式一 ",
"OPTION_HREF": "",
"OPTION_TYPE": "imagelist",
"OPTION_CONTENT": "",
"EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=8f4e214b53e4cfce",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}, {
"OPTION_CODE": "190",
"OPTION_NAME": "B、春、夏款款式二",
"OPTION_HREF": "",
"OPTION_TYPE": "imagelist",
"OPTION_CONTENT": "",
"EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=927308324fa1f0fa",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}, {
"OPTION_CODE": "72",
"OPTION_NAME": "C、春、夏款款式三",
"OPTION_HREF": "",
"OPTION_TYPE": "imagelist",
"OPTION_CONTENT": "",
"EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=be74770291a746f3",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}, {
"OPTION_CODE": "73",
"OPTION_NAME": "D、春、夏款款式四",
"OPTION_HREF": "",
"OPTION_TYPE": "imagelist",
"OPTION_CONTENT": "",
"EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=8828122cb5818a04",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}, {
"OPTION_CODE": "74",
"OPTION_NAME": "E、春、夏款款式五",
"OPTION_HREF": "",
"OPTION_TYPE": "imagelist",
"OPTION_CONTENT": "",
"EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=a746a3bbb7d55e3b",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}, {
"OPTION_CODE": "75",
"OPTION_NAME": "F、现发放款式",
"OPTION_HREF": "",
"OPTION_TYPE": "",
"OPTION_CONTENT": "",
"EMC_URL": "",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}]
}, {
"COLUMN_CODE": "145",
"COLUMN_NAME": "5、您心目中最佳的冬装棉服款式是",
"COLUMN_TYPE": "radio",
"COLUMN_CONTENT": "",
"ISSELECT": false,
"OPTION_LIST": [{
"OPTION_CODE": "76",
"OPTION_NAME": "A、冬装棉服款式一 ",
"OPTION_HREF": "",
"OPTION_TYPE": "imagelist",
"OPTION_CONTENT": "",
"EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=b39968d6d0b7446e",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}, {
"OPTION_CODE": "77",
"OPTION_NAME": "B、冬装棉服款式二",
"OPTION_HREF": "",
"OPTION_TYPE": "imagelist",
"OPTION_CONTENT": "",
"EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=a55d3e9b0a49ae8d",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}]
}, {
"COLUMN_CODE": "146",
"COLUMN_NAME": "6、在您选中的款式中，需要改进的细节 ",
"COLUMN_TYPE": "radio",
"COLUMN_CONTENT": "",
"ISSELECT": false,
"OPTION_LIST": [{
"OPTION_CODE": "78",
"OPTION_NAME": "A、工牌悬挂配饰",
"OPTION_HREF": "",
"OPTION_TYPE": "",
"OPTION_CONTENT": "",
"EMC_URL": "",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}, {
"OPTION_CODE": "79",
"OPTION_NAME": "B、裤装口袋",
"OPTION_HREF": "",
"OPTION_TYPE": "",
"OPTION_CONTENT": "",
"EMC_URL": "",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}, {
"OPTION_CODE": "80",
"OPTION_NAME": "C、夹克口袋 ",
"OPTION_HREF": "",
"OPTION_TYPE": "",
"OPTION_CONTENT": "",
"EMC_URL": "",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}, {
"OPTION_CODE": "81",
"OPTION_NAME": "D、衣扣 ",
"OPTION_HREF": "",
"OPTION_TYPE": "",
"OPTION_CONTENT": "",
"EMC_URL": "",
"OPTION_ANSWER": "0",
"POLLNUM": 0,
"ISSELECT": false
}]
}, {
"COLUMN_CODE": "147",
"COLUMN_NAME": "7、您对选中样衣的其他建议",
"COLUMN_TYPE": "text",
"COLUMN_CONTENT": "",
"ISSELECT": false,
"OPTION_LIST": []
}],
"success": "1"
}
2）html代码
<div class="select-item" v-if="voteType == 'A' || voteType == 'B'" :key="index" v-for="(item, index) in detailList">
<div class="family select-item-title" :attr="item.COLUMN_CODE" v-if="item.COLUMN_TYPE == 'radio'" v-html="item.COLUMN_NAME + '（单选）'"></div>
<div class="family select-item-title" :attr="item.COLUMN_CODE" v-else-if="item.COLUMN_TYPE == 'checkbox'" v-html="item.COLUMN_NAME + '（多选）'"></div>
<div class="family select-item-title" :attr="item.COLUMN_CODE" v-else v-html="item.COLUMN_NAME"></div>
<div class="option-con" v-if="item.COLUMN_TYPE != 'text'" :key="index1" v-for="(item1, index1) in item.OPTION_LIST">
<div class="option-con-row" v-if="item1.OPTION_TYPE != 'text'">
<input :name="item.COLUMN_CODE" :type="item.COLUMN_TYPE" v-model="item1.ISSELECT" value="true" :checked="item1.ISSELECT" :disabled="isAnswer" class="tui-checkbox">
<div class="family option-desc">{{item1.OPTION_NAME}}</div>
</div>
<div class="text-area-con" v-else>
<div class="option-con-row">
<input :name="item.COLUMN_CODE" :type="item.COLUMN_TYPE" v-model="item1.ISSELECT" value="true" :checked="item1.ISSELECT" :disabled="isAnswer" class="tui-checkbox">
<div class="family option-desc">{{item1.OPTION_NAME}}</div>
</div>
<textarea class="text-area" rows="3" v-model="item1.OPTION_CONTENT" :readonly="isAnswer"></textarea>
</div>
<img class="option-con-img" v-if="item1.EMC_URL" :src="item1.EMC_URL">
</div>
<div class="option-con" v-if="item.COLUMN_TYPE == 'text'">
<div class="text-area-con">
<textarea class="text-area" rows="3" v-model="item.COLUMN_CONTENT" :readonly="isAnswer"></textarea>
</div>
</div>
</div>
3）css样式
/*radio或checked的样式：*/
.checkbox-list-con .mint-msgbox-message{
line-height: 20px;
}
.checkbox-list-con span {
position: relative;
margin-right: 15px;
}
.checkbox-list-con .Checkbox {
position: absolute;
visibility: hidden;
}
.checkbox-list-con .Checkbox+label {
position:absolute;
width: 16px;
height: 16px;
border: 1px solid #A6A6A6;
border-radius: 50%;
background-color:#ffffff;
}
.checkbox-list-con .Checkbox:checked+label:after {
content: "";
position: absolute;
left: 2px;
top:2px;
width: 9px;
height: 4px;
border: 2px solid #00b7ee;
border-top-color: transparent;
border-right-color: transparent;
transform: rotate(-45deg);
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
}
.checkbox-list{
display: flex;
flex-direction: row;
margin-bottom: 5px;
align-items: center;
line-height: 20px;
}
.checkbox-list-con{
display: flex;
flex-direction: column;
padding: 10px 20px;
}
/*自定义checkbox*/
.tui-checkbox:checked {
background:#1673ff
}
.tui-checkbox {
width:25px;
height:25px;
background-color:#ffffff;
border:solid 1px #dddddd;
-webkit-border-radius:50%;
border-radius:50%;
font-size:0.8rem;
margin:0;
padding:0;
position:relative;
display:inline-block;
vertical-align:top;
cursor:default;
-webkit-appearance:none;
-webkit-user-select:none;
user-select:none;
-webkit-transition:background-color ease 0.1s;
transition:background-color ease 0.1s;
}
.tui-checkbox:checked::after {
content:'';
top:5px;
left:5px;
position:absolute;
background:transparent;
border:#fff solid 2px;
border-top:none;
border-right:none;
height:6px;
width:10px;
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}
/*其他样式*/
.score-result{
font-size: 16px;
font-weight: 600!important;
color: #2E8B57;
width: calc(100% - 40px);
padding: 10px 20px;
line-height: 20px;
background: #ffffff;
}
.text-area-con{
width: 100%;
}
.text-area{
width: calc(100% - 10px);
/*height: 80px;*/
padding: 5px;
outline: none;
resize: none;
font-size: 15px;
font-weight: 500;
color: #333333;
font-family: "Microsoft YaHei";
border: 1px solid #888888;
}
.appointment-btn {
position: relative!important;
font-size: 18px;
color: #ffffff;
text-align: center;
line-height: 44px;
height: 44px;
border-top: 1px solid #f2f2f2;
background: #366CB3;
width: calc(100% - 32px);
margin: 0px 0px 15px 16px;
border-radius: 3px;
letter-spacing: 4px;
}
.option-desc{
font-size: 15px;
margin-left: 20px;
width: calc(100% - 45px);
text-align: justify;
line-height: 24px;
}
.option-desc1{
font-size: 15px;
margin-left: 20px;
width: calc(100% - 45px);
text-align: justify;
line-height: 24px;
color: #F0686E;
}
.option-con-img{
width: calc(100% - 90px);
height: 140px;
margin-left: 45px;
}
.option-con-row{
display: flex;
align-items: center;
width: 100%;
padding: 10px 0px;
}
.option-con{
display: flex;
flex-direction: column;
align-items: flex-start;
width: calc(100% - 40px);
padding: 10px 20px;
border-top: 1px solid #efefef;
}
.select-item-title{
width: calc(100% - 40px);
padding: 10px 20px;
color: #4682B4;
text-align: justify;
font-size: 15px;
line-height: 24px;
}
.select-item{
display: flex;
flex-direction: column;
margin-bottom: 15px;
background: #ffffff;
}
.bottom-con{
display: flex;
flex-direction: column;
width: 100%;
background: #f2f2f2;
}
.top-four-img{
width: 16px;
height: 16px;
}
.top-four-title{
color: #434343;
font-size: 16px;
margin-right: 5px;
}
.top-four{
display: flex;
justify-content: center;
align-items: center;
background: #ffffff;
width: 100%;
padding: 15px 0px;
}
.top-three-content{
color: #333333;
font-size: 15px;
line-height: 28px;
text-indent:2em;
text-align: justify;
}
.top-three-desc{
color: #4682B4;
font-size: 15px;
line-height: 28px;
text-indent:2em;
}
.top-three{
width: calc(100% - 40px);
padding: 15px 20px 0px 20px;
background: #ffffff;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.top-three1{
width: calc(100% - 40px);
padding: 15px 20px 15px 20px;
background: #ffffff;
}
.top-two-time{
width: 100%;
text-align: center;
font-size: 13px;
color: #999999;
margin-bottom: 10px;
}
.top-two-title{
font-size: 18px;
color: #4682B4;
text-align: center;
width: 100%;
margin-bottom: 10px;
line-height: 24px;
}
.top-one>img{
height: 100%;
width: 100%;
}
.top-two{
width: calc(100% - 40px);
background: #ffffff;
padding:0px 20px;
border-bottom: 1px solid #efefef;
}
.top-one{
height: 100px;
width: 100%;
}
.top-con{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
margin-bottom: 15px;
}
.wrapper {
width: 100%;
height: 100%;
/*height: calc(100% - 70px);*/
overflow: auto;
background: #f2f2f2;
-webkit-overflow-scrolling: touch;
}
.container {
height: 100%;
background-color: #f2f2f2;
display: flex;
flex-direction: column;
}
4.效果图
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
赞 (0)
相关推荐
-
vue.js删除动态绑定的radio的指定项
上图效果,动态添加绑定radio选项,然后也可以动态删除,右边编辑器删除,左边的视图也对应的删除. 视图代码 view: "<ul><li v-for='option in options'>" + "<input type='radio' :name='groupName'>{{option.text}}" + "</li></ul>", 数据绑定model.options: opti
-
vue.js选中动态绑定的radio的指定项
上一文,介绍了vue.js动态添加.删除绑定的radio选项,本文介绍如何选中radio的某一项 绑定的数据和上文的model是一致的,选中radio或者checkbox需要注意的是: 不管<input type='radio checked='true''> 你的checked属性值是true或者false,他都会选中. 选中不选中,不是看checked的属性值,而是看有没有checked这个属性,所以,动态选中,不用v-model,也不用checked='true',判断是否需要渲染ch
-
vue中radio根据动态值绑定checked无效的解决
目录 1.问题分析 2.vue中分析(完成代码请看后面) 3.完成代码(该例子中input是自定义的样式) 1)json数据 2)html代码 3)css样式 4.效果图 1.问题分析 在vue之前,我们想要获取某一组(设置相同的name属性)radio的选中状态是通过name属性获取,判断input的checked是true还是false,但是当列表中有多组(动态获取)就显得很乏力:vue出现后我们可以通过v-model很巧妙的完成. 2.vue中分析(完成代码请看后面) <input :na
-
vue中v-model对select的绑定操作
1.单选时 <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }
-
聊聊Vue 中 title 的动态修改问题
由于之前的 Vue 项目打包成果物一直是嵌入集成平台中,所以一直没有关注过项目的 title.直到最近,突然有个需求,要求点击按钮在集成平台外新开一个页面,此时我才发现,原来我的项目的 title 一直是万年不变的 vue-project.理所应当的,这个问题被测试爸爸提了一个大大的缺陷. 犯了错的我赶紧解决这个问题,但是经过一段时间的摸索,我却发现,这一个小小的问题,却有着很多不同的解法. 首先,毫无疑问的是,我们应该使用 document.title 方法通过 DOM 操作来修改 title
-
vue中img src 动态加载本地json的图片路径写法
目录: 注意:本地json文件和json文件里的图片地址都必须写在static 静态文件夹里:否则json文件里的url地址找不到. major_info.json文件里的图片路径写法 页面通过v-bind的方式加载: PS:vue中图片src路径赋值 vue中引入static文件夹中图片,本以为src中直接写入图片所在路径即可,结果发现图片无法显示,控制台报404错误,图片无法找到.网上找到解决方案,在此mark一下,以便以后查询. 图片src路径动态赋值 <img class="thu
-
Vue中父子组件的值传递与方法传递
一.Vue中父组件向子组件传值 利用v-bind向子组件传值,子组件中利用props接受 <div id="app"> <father></father> </div> <template id="father"> <div> <!--注意点: 组件是可以使用自己的数据的--> <p>{{name}}</p> <p>{{age}}</p>
-
Vue中使用element-ui给按钮绑定一个单击事件实现点击按钮就弹出dialog对话框
目录 1.需求描述 2.功能实现 1.创建按钮 2.创建对话框 3.对话框与按钮的绑定 3.对话框表单的改造 4.对“状态”Switch开关所提交的类型进行修改 5.完整代码 总结 1.需求描述 想要实现点击一个按钮就弹出一个对话框,在对话框中可输入数据进行提交,在点击取消时对话框关闭 2.功能实现 1.创建按钮 在element中把找到按钮的代码放到div里 <el-row> <el-button type="primary" plain>新增</el-
-
vue中使用iview自定义验证关键词输入框问题及解决方法
一.验证需求 对应配置的关键词输入框,验证要求如下: 1.总字数不能超过7000个: 2.去除配置的关键词特殊符号,得到的关键词组数不能超过300:(如:aaa&(bbb|ccc)|(!ddd|eee)),去掉特殊符号,有5组) 3.单个关键词长度不能超过20:(如:aaaaa&(bbb|ccc)),如果aaaaa长度超过20则提示) 二.解决方法 在关键词输入对应的FormItem中加入一个prop属性,作为验证字段使用:注意该FormItem是包含于Form的: form表单中添加ru
-
MySQL5.7中的sql_mode默认值带来的坑及解决方法
在正常项目开发过程中,如果MySQL版本从5.6升级到5.7版本.作为DBA在考虑数据库版本升级带来的影响时,一般会有几个注意点: sql_mode optimizer_switch 本文主要内容是MySQL升级到5.7版本之后,由于默认的 sql_mode 值带来的坑以及对应的解决方案. 案例一:ONLY_FULL_GROUP_BY 问题描述 MySQL版本从5.6升级至5.7之后,部分SQL执行报错,报错信息如下: ERROR 1055 (42000): Expression #3 of X
-
Vue 中 a标签上href无法跳转的解决方式
问题: 使用vue-router 在IE下 a标签里的路由不跳转,火狐,chrome工作正常. 解决: 在App.vue 里增加判断IE浏览器手动修复-- export default { name: 'App', mounted(){ function checkIE(){ return '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.s
-
解决vue中使用less/sass及使用中遇到无效的问题
一:使用方法 在vue官方脚手架中,即vue-lci搭建的项目中,可以轻易的使用less/sass. 先使用npm下载依赖,命令行为'npm install less less-loader –save',再在webpack.base.conf.js中添加rules对象: { test: /\.less$/, loader: "style-loader!css-loader!less-loader" }` 然后在style标签中添加lang="less"即可,或者直